{# DO NOT AUTO INDENT #}
{% extends 'base/base.html' %}
{% load static %}
{% load custom_tags %}
{% block title %}
Customize Report
{% endblock title %}

{% block custom_js_css_link %}
<link href="{% static 'plugins/markdown/simplemde.min.css' %}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
<li class="breadcrumb-item"><a href="#">Settings</a></li>
<li class="breadcrumb-item active">Customize Report</li>
{% endblock breadcrumb_title %}

{% block page_title %}
reNgine PDF Report Settings
{% endblock page_title %}

{% block main_content %}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <h4 class="header-title">Customize Report</h4>
        <p>reNgine allows you to generate PDF report. PDF reports are fully customizable. While downloading PDF Report, you can choose whether to download Vulnerability Report or Reconnaissance Report or both.
          <br>This section allows you to customize the report, such as colors, and sections to include in the report.
        </p>
        <form method="post">
          {% csrf_token %}
          <h4 class="header-title">Color</h4>
          <table>
            <tr>
              <td>
                <b>Primary Color</b>
                <br>
                (Primary Color is the color used for the Main Title, Footer Background and Page Counters.)
              </td>
              <td>
                <div class="ms-4">
                  {{form.primary_color}}
                  <div class="primary-color-picker"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <b>Secondary Color</b>
                <br>
                (Secondary color is currently being used for cover background.)
              </td>
              <td>
                <div class="ms-4">
                  {{form.secondary_color}}
                  <div class="secondary-color-picker"></div>
                </div>
              </td>
            </tr>
          </table>
          <h4 class="header-title mt-3">Report Generated by</h4>
          <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mt-2">
              <label for="company_name" class="form-label">Company Name</label>
              {{form.company_name}}
            </div>
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mt-2">
              <label for="company_address" class="form-label">Company Address</label>
              {{form.company_address}}
            </div>
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mt-2">
              <label for="company_website" class="form-label">Company Website</label>
              {{form.company_website}}
            </div>
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mt-2">
              <label for="company_email" class="form-label">Company Email</label>
              {{form.company_email}}
            </div>
          </div>
          <div class="d-flex mt-3">
            <div class="d-inline-block"> <h4 class="header-title">Show Footer Text?</h4></div>
            <div class="d-inline-block ms-3">
              {{form.show_footer}}
            </div>
          </div>
          <p>This could be copyright text, or year of generation and the placement for footer text is bottom left.</p>
          <label for="footer_text" class="form-label">Footer Text</label>
          {{form.footer_text}}
          <div class="d-flex mt-3">
            <div class="d-inline-block"> <h4 class="header-title">Show reNgine Banner/Credits?</h4></div>
            <div class="d-inline-block ms-3">
              {{form.show_rengine_banner}}
            </div>
          </div>
          <p>If turned on, generated report will contain 'Generated by reNgine'.</p>
          <div class="d-flex mt-3">
            <div class="d-inline-block"> <h4 class="header-title">Show Executive Summary?</h4></div>
            <div class="d-inline-block ms-3">
              {{form.show_executive_summary}}
            </div>
          </div>
          <p>If turned on, reNgine will include Executive Summary in the report. You can customize the executive summary section.
            <br>
            <b>Please note that, the Executive Summary section will appear before quick summary.</b>
          </p>
          <p>You can customize the executive summary and methodology template using markdown. Replace the below syntax wherever you require. <b>Curly braces are must!</b></p>
          <h4 class="header-title">Executive Summary Syntax</h4>
          <ul>
            <li><span class="badge bg-primary mt-2">{scan_date}</span> Target Scan Date Ex. 25 June, 2020 .</li>
            <li><span class="badge bg-primary mt-2">{company_name}</span> Company which performed Vulnerability/Reconnaissance Audit.</li>
            <li><span class="badge bg-primary mt-2">{target_name}</span> Target Domain Name.</li>
            <li><span class="badge bg-primary mt-2">{target_description}</span> Target Description.</li>
            <li><span class="badge bg-primary mt-2">{subdomain_count}</span> Total number of subdomains discovered.</li>
            <li><span class="badge bg-primary mt-2">{vulnerability_count}</span> Total number of Vulnerabilities identified.</li>
            <li><span class="badge bg-primary mt-2">{critical_count}</span> Total number of Critical Severity Vulnerabilities identified.</li>
            <li><span class="badge bg-primary mt-2">{high_count}</span> Total number of High Severity Vulnerabilities identified.</li>
            <li><span class="badge bg-primary mt-2">{medium_count}</span> Total number of Medium Severity Vulnerabilities identified.</li>
            <li><span class="badge bg-primary mt-2">{low_count}</span> Total number of Low Severity Vulnerabilities identified.</li>
            <li><span class="badge bg-primary mt-2">{info_count}</span> Total number of Informational Vulnerabilities identified.</li>
            <li><span class="badge bg-primary mt-2">{unknown_count}</span> Total number of Vulnerabilities with Unknown Severity identified.</li>
          </ul>
          <div class="mt-2">
            {{form.executive_summary_description}}
          </div>
          <input type="submit" value="Save Report Settings" class="btn btn-primary float-end mt-2">
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock main_content %}


{% block page_level_script %}
<script src="{% static 'plugins/markdown/simplemde.min.js' %}"></script>
<script src="{% static 'custom/custom.js' %}"></script>
<script type="text/javascript">
new SimpleMDE({
  element: document.getElementById("executive_summary_description"),
  toolbar: ["preview", "bold", "italic", "heading", "heading-2", "unordered-list", "link" ,"|", "code" ,"|", "quote", "|", "guide"],
  spellChecker: false,
});

const primary_pickr = Pickr.create({
  el: '.primary-color-picker',
  theme: 'monolith', // or 'monolith', or 'nano'

  swatches: [
    'rgb(79, 195, 247)',
    'rgb(100, 181, 246)',
    'rgb(77, 208, 225)',
    'rgb(255, 183, 77)',
    'rgb(255, 138, 101)',
  ],

  default: '{{primary_color}}',

  components: {
    // Main components
    preview: true,
    opacity: true,
    hue: true,
    // Input / output Options
    interaction: {
      hex: true,
      input: true,
    }
  }
});

primary_pickr.on('save', (color, instance) => {
  document.getElementById("primary_color").value = primary_pickr.getColor().toHEXA().toString(0);
}).on('change', (color, source, instance) => {
  primary_pickr.setColor(color.toHEXA().toString(0));
  document.getElementById("primary_color").value = primary_pickr.getColor().toHEXA().toString(0);
});

const secondary_pickr = Pickr.create({
  el: '.secondary-color-picker',
  theme: 'monolith', // or 'monolith', or 'nano'

  swatches: [
    'rgb(33,33,33)',
    'rgb(66,66,66)',
    'rgb(52, 73, 94)',
    'rgb(44, 62, 80)',
  ],

  default: '{{secondary_color}}',

  components: {
    // Main components
    preview: true,
    opacity: true,
    hue: true,
    // Input / output Options
    interaction: {
      hex: true,
      input: true,
    }
  }
});

secondary_pickr.on('save', (color, instance) => {
  document.getElementById("secondary_color").value = secondary_pickr.getColor().toHEXA().toString(0);
}).on('change', (color, source, instance) => {
  secondary_pickr.setColor(color.toHEXA().toString(0));
  document.getElementById("secondary_color").value = secondary_pickr.getColor().toHEXA().toString(0);
});

</script>
{% endblock page_level_script %}