{% extends "base.html" %}
{% load opencve_extras %}
{% load crispy_forms_tags %}

{% block title %}{% if title %}{{ title }} {% endif %}CVEs and Security Vulnerabilities - OpenCVE{% endblock %}

{% block meta_description %}Explore the latest vulnerabilities and security issues {% if title %}of {{ title }} {% endif %}in the CVE database{% endblock %}

{% block navbar_title %}Vulnerabilities{% if title %} ({{ title }}){% endif %}{% endblock %}

{% block content %}

<section class="content">
    <div class="row">
        <div class="col-md-12">
            {% include "messages.html" %}
        </div>
        <div class="col-md-7">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Search</h3>
                </div>
                <div class="box-body" id="advanced-search">
                    <form method="GET">
                        <div class="row">
                            <div class="col-md-9">
                                {{ search_form.q|as_crispy_field }}
                            </div>
                            <div class="col-md-3">
                                <div class="btn-group" style="width: 100%;">
                                    <button type="submit" class="btn btn-primary" style="width: 60%;"><i class="fa fa-search"></i> Search</button>
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 40%;">
                                        <i class="fa fa-wrench"></i> <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a href="#" data-toggle="modal" data-target="#queryBuilderModal"><i class="fa fa-cogs fa-fw"></i> Query Builder</a></li>
                                        <li><a href="#" id="save-view-button"><i class="fa fa-save fa-fw"></i> Save Query</a></li>
                                        <li><a href="#" data-toggle="modal" data-target="#modal-load-views"><i class="fa fa-download fa-fw"></i> Load Query</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <small class="form-text text-muted">
                                     Use the <a href='#' data-toggle='modal' data-target='#queryBuilderModal'>Query Builder</a> to create your own search query, or check out the <a href='https://docs.opencve.io/guides/advanced_search/'>documentation</a> to learn the search syntax.
                                </small>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Search Examples</h3>
                </div>
                <div class="box-body">
                    <a href="{% url 'cves' %}?q=kev:true" class="query-example-tag">CVEs in KEV</a>
                    <a href="{% url 'cves' %}?q=epss%3E%3D80" class="query-example-tag">CVEs with EPSS >= 80%</a>
                    <a href="{% url 'cves' %}?q=vendor:microsoft+AND+cvss31%3E%3D9" class="query-example-tag">Crit. Microsoft</a>
                    <a href="{% url 'cves' %}?q=vendor:apache+AND+cvss31%3E%3D7" class="query-example-tag">High Apache</a>
                    <a href="{% url 'cves' %}?q=cwe:CWE-89" class="query-example-tag">SQL Injection (CWE-89)</a>
                    <a href="{% url 'cves' %}?q=vendor:linux+AND+product:linux_kernel" class="query-example-tag">Linux Kernel</a>
                    <a href="{% url 'cves' %}?q=cvss31%3E%3D7+AND+cvss31%3C9" class="query-example-tag">High (CVSS 3.1)</a>
                    <a href="{% url 'cves' %}?q=vendor:apache+AND+product:struts" class="query-example-tag">Apache Struts</a>
                    <a href="{% url 'cves' %}?q=description%3A%27remote+code+execution%27" class="query-example-tag">RCE (Remote Code Execution)</a>
                    <a href="{% url 'cves' %}?q=cwe:CWE-79" class="query-example-tag">XSS (CWE-79)</a>
                    <a href="{% url 'cves' %}?q=cvss40%3E%3D9" class="query-example-tag">Critical (CVSS 4.0)</a>
                    <a href="{% url 'cves' %}?q=userTag%3Atocheck" class="query-example-tag">CVEs to check</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class='col-md-12'>
            {% if cves %}
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Search Results <small>({{ page_obj.paginator.count }} CVEs found)</small></h3>
                    <div class="box-tools pull-right">
                        <a href="{% url 'cves_export_csv' %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-default btn-xs"><i class="fa fa-download"></i> Export CSV</a>
                    </div>
                </div>
                <div class="box-body table-responsive no-padding">
                    {% include "cves/includes/cve_table.html" %}

                    <div class="center">
                        <div class="pagination">
                            <span class="step-links">
                                {% if page_obj.has_previous %}
                                    <a href="{% url 'cves'%}?{% query_params_url 'page' 1 %}">&laquo; first</a>
                                    <a href="{% url 'cves'%}?{% query_params_url 'page' page_obj.previous_page_number %}">previous</a>
                                {% endif %}

                                <span class="current">
                                    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                                </span>

                                {% if page_obj.has_next %}
                                    <a href="{% url 'cves'%}?{% query_params_url 'page' page_obj.next_page_number %}">next</a>
                                    <a href="{% url 'cves'%}?{% query_params_url 'page' page_obj.paginator.num_pages %}">last &raquo;</a>
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <p class="text-muted"><em>No CVE found.</em></p>
            {% endif %}
        </div>
    </div>
</section>

<div class="modal fade" id="queryBuilderModal" tabindex="-1" role="dialog" aria-labelledby="queryBuilderModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="queryBuilderModalLabel">
            Advanced Search Builder
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </h4>
      </div>
      <div class="modal-body">
          <div id="modal-query-display" class="query-preview">
            Query will appear here as you build it...
          </div>
          <hr>
          <div id="dynamic-query-builder">
              <div class="form-group row">
                  <label for="query-builder-cve" class="col-sm-2 col-form-label">CVE ID</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control query-builder-input" id="query-builder-cve" data-field="cve" placeholder="e.g., CVE-2023-1234">
                  </div>
              </div>
              <div class="form-group row">
                  <label for="query-builder-description" class="col-sm-2 col-form-label">Description</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control query-builder-input" id="query-builder-description" data-field="description" placeholder="Text search in description...">
                  </div>
              </div>
              <div class="form-group row">
                  <label for="query-builder-title" class="col-sm-2 col-form-label">Title</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control query-builder-input" id="query-builder-title" data-field="title" placeholder="Text search in title...">
                  </div>
              </div>

              <div class="form-group row">
                <label for="query-builder-project-1" class="col-sm-2 col-form-label">Project</label>
                <div class="col-sm-10">
                    <select class="form-control query-builder-input select2-project-builder" id="query-builder-project-1" data-field="project" data-placeholder="Select a project...">
                        <option></option>
                        {% for project in projects %}
                        <option value="{{ project.name }}">{{ project.name }}</option>
                        {% endfor %}
                    </select>
                </div>
              </div>

              <div class="form-group row">
                <label for="query-builder-usertag-1" class="col-sm-2 col-form-label">User Tag</label>
                <div class="col-sm-10">
                    <select class="form-control query-builder-input select2-tags-builder" id="query-builder-usertag-1" data-field="userTag" data-placeholder="Select a tag...">
                        <option></option>
                        {% for tag in user_tags %}
                        <option value="{{ tag }}">{{ tag }}</option>
                        {% endfor %}
                    </select>
                </div>
              </div>

              <div class="form-group row">
                <label class="col-sm-2 col-form-label">Date Filter</label>
                <div class="col-sm-3">
                    <select class="form-control query-builder-input date-field">
                        <option value="created" selected>Created</option>
                        <option value="updated">Updated</option>
                    </select>
                </div>
                <div class="col-sm-2">
                    <select class="form-control query-builder-input date-operator">
                        <option value=">=" selected>&gt;=</option>
                        <option value="<=">&lt;=</option>
                        <option value="=">=</option>
                    </select>
                </div>
                <div class="col-sm-5">
                    <input type="text" class="form-control query-builder-input date-value" placeholder="e.g., 2025-01-01 or 7d">
                </div>
              </div>

              <div class="form-group row">
                  <label class="col-sm-2 col-form-label">CVSS Score</label>
                  <div class="col-sm-3">
                      <select class="form-control query-builder-input cvss-version" data-field-prefix="cvss">
                          <option value="cvss40" selected>CVSS v4.0</option>
                          <option value="cvss31">CVSS v3.1</option>
                          <option value="cvss30">CVSS v3.0</option>
                          <option value="cvss20">CVSS v2.0</option>
                      </select>
                  </div>
                  <div class="col-sm-2">
                      <select class="form-control query-builder-input cvss-operator">
                          <option value=">=" selected>&gt;=</option>
                          <option value="<=">&lt;=</option>
                          <option value="=">=</option>
                      </select>
                  </div>
                  <div class="col-sm-5">
                      <input type="text" inputmode="numeric" pattern="[0-9]*" class="form-control query-builder-input cvss-score" placeholder="Score (0 - 10)">
                  </div>
              </div>

              <div class="form-group row">
                  <label for="query-builder-kev" class="col-sm-2 col-form-label">KEV</label>
                  <div class="col-sm-10">
                      <div class="checkbox">
                          <label>
                              <input type="checkbox" class="query-builder-input" id="query-builder-kev" data-field="kev"> Include CVEs in KEV catalog
                          </label>
                      </div>
                  </div>
              </div>

              <div class="form-group row">
                  <label class="col-sm-2 col-form-label">EPSS Score</label>
                  <div class="col-sm-2">
                      <select class="form-control query-builder-input epss-operator">
                          <option value=">=" selected>&gt;=</option>
                          <option value="<=">&lt;=</option>
                          <option value=">">&gt;</option>
                          <option value="<">&lt;</option>
                          <option value="=">=</option>
                      </select>
                  </div>
                  <div class="col-sm-8">
                      <input type="text" inputmode="numeric" pattern="[0-9]*" class="form-control query-builder-input epss-score" placeholder="Percentage (0 - 100)">
                  </div>
              </div>

              <div class="form-group row">
                  <label for="query-builder-cwe" class="col-sm-2 col-form-label">CWE</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control query-builder-input" id="query-builder-cwe" data-field="cwe" placeholder="e.g., CWE-89">
                  </div>
              </div>

              <div id="vendor-filters">
                  <div class="form-group row filter-group">
                      <label for="query-builder-vendor-1" class="col-sm-2 col-form-label">Vendor</label>
                      <div class="col-sm-9">
                          <input type="text" class="form-control query-builder-input" id="query-builder-vendor-1" data-field="vendor" placeholder="e.g., microsoft">
                      </div>
                      <div class="col-sm-1">
                          <button type="button" class="btn btn-success btn-sm add-filter" data-target="#vendor-filters" data-field="vendor" title="Add another vendor filter"><i class="fa fa-plus"></i></button>
                      </div>
                  </div>
              </div>
              <div id="product-filters">
                  <div class="form-group row filter-group">
                      <label for="query-builder-product-1" class="col-sm-2 col-form-label">Product</label>
                      <div class="col-sm-9">
                          <input type="text" class="form-control query-builder-input" id="query-builder-product-1" data-field="product" placeholder="e.g., windows">
                      </div>
                      <div class="col-sm-1">
                          <button type="button" class="btn btn-success btn-sm add-filter" data-target="#product-filters" data-field="product" title="Add another product filter"><i class="fa fa-plus"></i></button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="reset-query-builder" class="btn btn-secondary pull-left"><i class="fa fa-undo"></i> Reset Builder</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="apply-modal-query" class="btn btn-primary"><i class="fa fa-check"></i> Apply Query</button>
      </div>
    </div>
  </div>
</div>

{% if request.current_organization %}
<div class="modal fade" id="modal-save-view">
    <div class="modal-dialog">
      <div class="modal-content">
        <form method="POST" action="{% url 'create_view' org_name=request.current_organization.name %}">
            {% csrf_token %}
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Save the query</h4>
            </div>
            <div class="modal-body">
                {{ view_form|crispy }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <a class="btn btn-default pull-left" href="{% url 'list_views' org_name=request.current_organization.name %}">Manage the views</a>
                <button type="submit" class="btn btn-primary" id="foobar">Save</button>
            </div>
        </form>
      </div>
    </div>
</div>


<div class="modal fade" id="modal-load-views">
    <div class="modal-dialog modal-lg">
      <div class="box box-solid">
        <div class="box-header with-border">
            <h3 class="box-title" style="font-size: 18px;">List of Views</h3>
        </div>
        <div class="box-body">
            <div class="callout callout-info">
                Select a view to directly execute its corresponding query. You can also manage your views on <a href="{% url 'list_views' org_name=request.current_organization.name %}">this page</a>.
            </div>
            <ul class="nav nav-pills nav-stacked no-padding">
                {% for view in views %}
                <li class="view-item no-padding">
                    <a href="{% url 'cves' %}?q={{ view.query }}">
                        <div>
                            <span class="view-title"><i class="fa fa-terminal"></i> {{ view.name }}</span>
                            <span class="label {% if view.privacy == 'public' %}label-primary{% else %}label-warning{% endif %} pull-right">{{ view.privacy }}</span>
                        </div>
                        <p class="view-description">{{ view.description }}</p>
                        <code>{{ view.query }}</code>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
      </div>
    </div>
</div>
{% endif %}

{% endblock %}