{% extends "base_generic.html" %}

{% load bleach_tags humanize custom_tags extra_fields settings_tags shepherd_tags %}

{% block pagetitle %}{{ domain.name }} Details{% endblock %}


{% block content %}
  {% get_solo "commandcenter.VirusTotalConfiguration" as vt_config %}

  <div class="infrastructure-detail-page">
    <header class="detail-page-heading resource-detail-heading">
      <div class="detail-page-heading-main resource-detail-heading-main">
        <span class="detail-eyebrow">Domain</span>
        <h2>{{ domain.name }}</h2>
        <div class="detail-tag-list" aria-label="Domain status and tags">
          <span class="library-tag {% if domain.domain_status.domain_status == 'Available' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ domain.domain_status }}</span>
          <span class="library-tag {% if domain.health_status.health_status == 'Healthy' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ domain.health_status }}</span>
          {% for tag in domain.tags.names %}<span class="library-tag library-tag-neutral">{{ tag|bleach }}</span>{% endfor %}
        </div>
      </div>
      <div class="dropdown detail-page-heading-actions">
        <button id="domain-actions-button" type="button" class="btn btn-outline-primary btn-sm dropdown-toggle"
                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Actions</span></button>
        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="domain-actions-button">
      {% if domain.is_expired is False %}
        <a class="dropdown-item icon edit-icon" href="{% url 'shepherd:domain_update' domain.id %}">Edit</a>
        {% if domain.domain_status.domain_status == "Available" or domain.domain_status.domain_status == "Burned" %}
          <a class="dropdown-item icon checkout-icon" href="{% url 'shepherd:checkout' domain.id %}">Checkout Domain</a>
        {% else %}
          <a class="dropdown-item icon block-icon" href="#">Domain Unavailable</a>
        {% endif %}
        {% if domain.health_status.health_status == "Healthy" %}
          <a class="dropdown-item icon burn-icon" href="{% url 'shepherd:burn' domain.id %}">Mark Burned</a>
        {% endif %}
      {%  else %}
        {%  if request.user.role in 'manager, admin' %}
            <a class="dropdown-item icon edit-icon" href="{% url 'shepherd:domain_update' domain.id %}">Edit</a>
        {% endif %}
      {% endif %}
      <a class="dropdown-item icon trash-icon" href="{% url 'shepherd:domain_delete' domain.id %}">Delete</a>
        </div>
      </div>
    </header>

  <div class="infrastructure-detail-workspace">
    <!-- Navigation Tabs -->
    {% comment %} Load tabs via AJAX so badges update with delete actions {% endcomment %}
    <ul id="tab-bar" class="nav nav-tabs nav-justified"
        js-update-tabs-url="{% url 'shepherd:ajax_update_domain_badges' domain.id %}">
      {% include "snippets/domain_nav_tabs.html" %}
    </ul>

    <!-- General Tab -->
    <div class="tab-content">
      <div id="details" class="tab-pane in active">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4 id="domain-details-heading">Domain Details</h4>
          </div>
        </header>

        <div class="detail-layout">
          {% if domain.is_expired %}
            <div class="context-note infrastructure-status-note infrastructure-status-note-danger" role="alert">
              <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
              <div><strong>Domain expired.</strong> It cannot be checked out and its data is read-only. Managers and admins can update the expiration date.</div>
            </div>
          {% endif %}

          <section class="detail-panel" aria-labelledby="domain-details-heading">
            <dl class="detail-grid">
              <div class="detail-field">
                <dt>Status</dt>
                <dd><span class="library-tag {% if domain.domain_status.domain_status == 'Available' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ domain.domain_status }}</span></dd>
              </div>
              <div class="detail-field">
                <dt>Registrar</dt>
                <dd>{% if domain.registrar %}{{ domain.registrar }}{% else %}<span class="detail-empty">Unavailable</span>{% endif %}</dd>
              </div>
              <div class="detail-field">
                <dt>Purchase date</dt>
                <dd class="operator-data">{{ domain.creation }}</dd>
              </div>
              <div class="detail-field">
                <dt>Expiration date</dt>
                <dd class="operator-data{% if domain.is_expired %} high{% endif %}">{{ domain.expiration }}</dd>
              </div>
              <div class="detail-field">
                <dt>Auto renew</dt>
                <dd><span class="library-tag {% if domain.auto_renew %}library-tag-success{% else %}library-tag-danger{% endif %}"><i class="fas {% if domain.auto_renew %}fa-check-circle{% else %}fa-times-circle{% endif %}" aria-hidden="true"></i> {% if domain.auto_renew %}Enabled{% else %}Disabled{% endif %}</span></dd>
              </div>
              <div class="detail-field">
                <dt>Domain age</dt>
                <dd class="operator-data">{{ domain.get_domain_age_display }}</dd>
              </div>
            </dl>
          </section>

          <section class="detail-panel infrastructure-description-panel" aria-labelledby="domain-description-heading">
            <div class="detail-panel-header">
              <div>
                <span class="detail-eyebrow">Operator context</span>
                <h5 id="domain-description-heading">Description</h5>
              </div>
            </div>
            {% if domain.description %}
              <div id="domainDescription" class="detail-prose">{{ domain.description|strip_empty_tags|bleach }}</div>
            {% else %}
              <div class="empty-state">
                <p class="empty-state-title">No domain description yet</p>
                <p class="empty-state-description">Add purchasing or operational context to help operators choose and use this domain.</p>
              </div>
            {% endif %}
          </section>
        </div>
      </div>

      <!-- DNS Records Tab -->
      <div id="dns" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4 id="domain-dns-heading">DNS Records</h4>
          </div>
          {% if not domain.is_expired %}
            <a href="javascript:void(0)" class="icon redo-icon clickable-link js-domain-update btn btn-primary btn-sm"
               domain-update-csrftoken="{{ csrf_token }}"
               domain-update-url="{% url 'shepherd:ajax_update_dns_single' domain.id %}"
               domain-update-id="{{ domain.id }}">Refresh DNS Records</a>
          {% endif %}
        </header>

        {% if domain.reset_dns %}
          <div class="context-note mb-3" role="note">
            <i class="fas fa-sync-alt" aria-hidden="true"></i>
            <div><strong>Automatic DNS reset enabled.</strong> Ghostwriter will reset records after use when the registrar supports it.</div>
          </div>
        {% else %}
          <div class="context-note infrastructure-status-note infrastructure-status-note-warning mb-3" role="note">
            <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
            <div><strong>Automatic DNS reset is not configured.</strong> Operators should manually clean up records after use.</div>
          </div>
        {% endif %}

        {% if domain.dns %}
          <div class="table-responsive data-table-frame">
            <table class="table">
              <thead><tr><th class="align-middle text-start">Record</th><th class="align-middle text-start">Value</th></tr></thead>
              <tbody>
                {% if domain.dns.items %}
                  {% for record, value in domain.dns.items %}
                    <tr>
                      <td class="align-middle text-start operator-data" data-label="Record">{{ record|upper }}</td>
                      <td class="align-middle text-start table-note" data-label="Value">{% if value != "NoAnswer" and value != "NXDOMAIN" %}{{ value }}{% else %}--{% endif %}</td>
                    </tr>
                  {% endfor %}
                {% else %}
                  <tr><td class="align-middle text-start" data-label="Record">Record dictionary</td><td class="align-middle text-start table-note" data-label="Value">{{ domain.dns }}</td></tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="empty-state">
            <p class="empty-state-title">No DNS records yet</p>
            <p class="empty-state-description">Use <strong>Refresh DNS Records</strong> to query the domain's current DNS data.</p>
          </div>
        {% endif %}
      </div>

      <!-- Domain Health Tab -->
      <div id="health" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4 id="domain-health-heading">Domain Health</h4>
          </div>
          {% if not domain.is_expired and vt_config.enable %}
            <a href="javascript:void(0)" class="icon redo-icon clickable-link js-domain-update btn btn-primary btn-sm"
               domain-update-csrftoken="{{ csrf_token }}"
               domain-update-url="{% url 'shepherd:ajax_update_cat_single' domain.id %}"
               domain-update-id="{{ domain.id }}">Refresh Categorization</a>
          {% endif %}
        </header>

        {% if domain.is_expired or not vt_config.enable %}
          <div class="context-note infrastructure-status-note infrastructure-status-note-warning mb-3" role="note">
            <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
            <div><strong>Categorization refresh is unavailable.</strong> VirusTotal integration is disabled or the domain is expired.</div>
          </div>
        {% endif %}

        <div class="detail-layout">
          <section class="detail-panel" aria-labelledby="domain-health-heading">
            <p class="detail-prose">Domain health changes when a third party applies an undesirable category or VirusTotal reports positive detections.</p>
            <dl class="detail-grid mt-3">
              <div class="detail-field"><dt>Status</dt><dd><span class="library-tag {% if domain.domain_status.domain_status == 'Available' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ domain.domain_status }}</span></dd></div>
              <div class="detail-field"><dt>Health</dt><dd><span class="library-tag {% if domain.health_status.health_status == 'Healthy' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ domain.health_status }}</span></dd></div>
              <div class="detail-field"><dt>Whois privacy</dt><dd><span class="library-tag {% if domain.whois_status.whois_status == 'Enabled' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ domain.whois_status }}</span></dd></div>
              <div class="detail-field"><dt>Last update</dt><dd class="operator-data">{% if domain.last_health_check %}{{ domain.last_health_check|naturalday:"DATE_FORMAT" }}{% else %}<span class="detail-empty">No record</span>{% endif %}</dd></div>
            </dl>
          </section>

          {% if domain.health_status.health_status == "Burned" %}
            <section class="detail-panel" aria-labelledby="domain-burned-heading">
              <div class="detail-panel-header">
                <div><span class="detail-eyebrow">Health review</span><h5 id="domain-burned-heading">Why this domain is burned</h5></div>
              </div>
              <div class="detail-prose">
                {% if domain.burned_explanation %}
                  {{ domain.burned_explanation|bleach|linebreaks }}
                {% else %}
                  <p class="mb-0">No explanation has been recorded. <a class="clickable" href="{% url 'shepherd:burn' domain.id %}">Add one now</a>.</p>
                {% endif %}
              </div>
            </section>
          {% endif %}

          <section class="detail-panel" aria-labelledby="domain-categorization-heading">
            <div class="detail-panel-header">
              <div>
                <span class="detail-eyebrow">Third-party review</span>
                <h5 id="domain-categorization-heading">Categorization</h5>
              </div>
            </div>
            <div class="table-responsive data-table-frame mb-0">
              <table class="table">
                <thead><tr><th class="align-middle text-start">Categorizer</th><th class="align-middle text-start">Category</th></tr></thead>
                <tbody>
                  {% if domain.categorization.items %}
                    {% for source, cat in domain.categorization.items %}
                      <tr><td class="align-middle text-start" data-label="Categorizer">{{ source }}</td><td class="align-middle text-start" data-label="Category">{{ cat|category_value|bleach|title }}</td></tr>
                    {% endfor %}
                  {% else %}
                    <tr><td class="align-middle text-start" data-label="Categorizer">No results</td><td class="align-middle text-start" data-label="Category">Refresh categorization to poll VirusTotal</td></tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
          </section>
        </div>
      </div>

      <!-- History Tab -->
      <div id="history" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4 id="domain-history-heading">Domain History</h4>
            <p class="content-section-intro">Entries are partially redacted when you cannot access the related client or project.</p>
          </div>
        </header>

        {% if domain.history_set.all %}
          <div class="table-responsive data-table-frame">
          <table id="domain-history-table" class="tablesorter table">
            <thead>
            <tr>
              <th class="align-middle pe-4 text-start">Project</th>
              <th class="align-middle pe-4 text-start">Activity Type</th>
              <th class="align-middle sorter-date-range-dMMMyyyy pe-4 text-start">Execution Window</th>
              <th class="align-middle pe-4 text-start">Checked Out By</th>
              <th class="align-middle sorter-false pe-4 text-end">Options</th>
            </tr>
            </thead>
            <tbody>
            {% for checkout in domain.history_set.all %}
              <tr>
                <td class="align-middle text-start">
                  {% if checkout.project|has_access:request.user %}
                    <a class="table-primary-link"
                       href="{% url 'rolodex:project_detail' checkout.project.id %}">{{ checkout.project }}</i></a>
                  {% else %}
                    <span class="blurry">REDACTED</span>
                  {% endif %}
                </td>
                <td class="align-middle text-start">{{ checkout.activity_type }}</td>
                <td class="align-middle text-start" data-text="{{ checkout.start_date|date:"Y-m-d" }}">{{ checkout.start_date|date:"DATE_FORMAT" }}
                  – {{ checkout.end_date|date:"DATE_FORMAT" }}</td>
                <td class="align-middle text-start">
                  {% if checkout.operator %}
                    {% if checkout.operator.name %}
                      {{ checkout.operator.name }} ({{ checkout.operator.username }})
                    {% else %}
                      {{ checkout.operator.username }}
                    {% endif %}
                  {% else %}
                    Unknown/Deleted user
                  {% endif %}
                </td>
                <td class="align-middle text-end">
                  {% if checkout.project|has_access:request.user %}
                    <div class="table-row-actions">
                      <button type="button" class="table-row-action"
                        data-bs-toggle="modal"
                        data-bs-target="#domain_history_detail_{{ checkout.id }}"
                        title="View additional information"
                        aria-label="View additional information"><i class="fas fa-eye" aria-hidden="true"></i></button>
                      <a class="table-row-action" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit this history entry" aria-label="Edit this history entry" href="{% url 'shepherd:history_update' checkout.id %}"><i class="fas fa-pencil-alt" aria-hidden="true"></i></a>
                      <a class="table-row-action table-row-action-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete this history entry" aria-label="Delete this history entry" href="{% url 'shepherd:history_delete' checkout.id %}"><i class="fas fa-trash-alt" aria-hidden="true"></i></a>
                    </div>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          </div>
        {% else %}
          <div class="empty-state">
            <p class="empty-state-title">No project history yet</p>
            <p class="empty-state-description">Check this domain out to a project to begin its usage history.</p>
          </div>
        {% endif %}
      </div>

      <!-- Extra Fields Tab -->
      {% if domain_extra_fields_spec %}
        <div id="extra-fields" class="tab-pane">
          <header class="content-section-header">
            <div class="content-section-heading">
              <h4 id="domain-extra-fields-heading">Extra Fields</h4>
              <p class="content-section-intro">Jinja2 template syntax is not rendered in these previews because a project and report context is required.</p>
            </div>
            <a class="icon edit-icon btn btn-primary btn-sm" href="{% url 'shepherd:domain_update' domain.id %}#extra-fields">Edit Extra Fields</a>
          </header>

          <div class="extra-fields-grid client-extra-fields-grid infrastructure-extra-fields-grid">
            {% for field_spec in domain_extra_fields_spec %}
              <section class="extra-field-card" aria-labelledby="domain-extra-field-{{ field_spec.internal_name }}">
                <div class="extra-field-card-header">
                  <h5 id="domain-extra-field-{{ field_spec.internal_name }}" class="extra-field-name">{{ field_spec.display_name }}</h5>
                  <span class="extra-field-type-badge">
                    {% if field_spec.type == "rich_text" %}Rich Text{% else %}{{ field_spec.get_type_display }}{% endif %}
                  </span>
                </div>
                <div class="extra-field-reference">
                  <span>Template reference</span>
                  <code>domain.extra_fields.{{ field_spec.internal_name }}</code>
                </div>
                <div class="extra-field-value">
                  <span class="extra-field-value-label">Current value</span>
                  <div class="extra-field-value-content">
                    {% if field_spec.type == "rich_text" %}
                      <span class="extra-field-summary">Formatted content is available in Preview.</span>
                    {% elif field_spec.type == "json" %}
                      <span class="extra-field-summary">Structured content is available in View JSON.</span>
                    {% else %}
                      {% include "user_extra_fields/field.html" with extra_fields=domain.extra_fields field_spec=field_spec preview_report=False %}
                    {% endif %}
                  </div>
                </div>
                {% if field_spec.type == "rich_text" or field_spec.type == "json" %}
                  <footer class="extra-field-actions">
                    {% if field_spec.type == "rich_text" %}
                      <button type="button" class="btn btn-primary btn-sm icon view-icon" data-bs-toggle="modal"
                              data-bs-target="#field_spec_{{ field_spec.internal_name }}">Preview</button>
                    {% else %}
                      <button type="button" class="btn btn-primary btn-sm icon code-icon" data-bs-toggle="modal"
                              data-bs-target="#field_spec_{{ field_spec.internal_name }}">View JSON</button>
                    {% endif %}
                  </footer>
                {% endif %}
              </section>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <!-- Notes Tab -->
      <div id="notes" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4 id="domain-notes-heading">Domain Notes</h4>
          </div>
          <a class="icon add-icon btn btn-primary btn-sm"
             href="{% url 'shepherd:domain_note_add' domain.id %}">Add a Note</a>
        </header>
        {% if domain.domainnote_set.all %}
          <div class="note-card-list">
            {% for note in domain.domainnote_set.all reversed %}
              <article id="note-container-{{ note.id }}" class="note-card">
                <div class="note-card-body">{{ note.note|bleach }}</div>
                <footer class="note-card-footer">
                  {% if request.user == note.operator or request.user|is_privileged %}
                    <div class="note-card-actions" aria-label="Note actions">
                      <a class="btn btn-outline-primary btn-sm icon edit-icon" href="{% url 'shepherd:domain_note_edit' note.id %}">Edit</a>
                      <a id="note-delete-button-{{ note.id }}" class="btn btn-outline-danger btn-sm js-confirm-delete"
                         data-bs-toggle="modal" data-bs-target="#confirm-delete-modal" href="javascript:void(0);"
                         delete-target-csrftoken="{{ csrf_token }}"
                         delete-target-url="{% url 'shepherd:ajax_delete_domain_note' note.id %}"
                         delete-target-id="{{ note.id }}" delete-target-type="note"><i class="fas fa-trash-alt" aria-hidden="true"></i> Delete</a>
                    </div>
                  {% endif %}
                  <div class="note-card-meta">
                    {% if note.operator %}<a class="note-card-author" href="{% url 'users:user_detail' note.operator.username %}">{{ note.operator.username }}</a>{% else %}<span class="note-card-author">Deleted user</span>{% endif %}
                    <span aria-hidden="true">&middot;</span>
                    <time class="note-card-time" datetime="{{ note.timestamp|date:'c' }}">{{ note.timestamp }}</time>
                  </div>
                </footer>
              </article>
            {% endfor %}
          </div>
        {% else %}
          <div class="empty-state">
            <p class="empty-state-title">No notes yet</p>
            <p class="empty-state-description">Add a note when operators need context that does not belong in the domain description.</p>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
  </div>
{% endblock %}

{% block tabs %}
  {{ block.super }}
{% endblock %}

{% block morescripts %}
  <!-- jQuery Tablesorter Script -->
  <script>
    $(document).ready(function () {
      $("#domain-history-table").tablesorter(
        {
          cssAsc: 'down',
          cssDesc: 'up',
          cssNone: 'none',
        }
      );
      $('.tablesorter').trigger('update');
    });
  </script>

  <!-- Submit Update Tasks with AJAX -->
  <script>
    $('.js-domain-update').each(function (index) {
      $(this).click(function () {
        var url = $(this).attr('domain-update-url');
        var domainId = $(this).attr('domain-update-id');
        var csrftoken = $(this).attr('domain-update-csrftoken');
        // Prep AJAX request with CSRF token
        $.ajaxSetup({
          beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
              xhr.setRequestHeader('X-CSRFToken', csrftoken);
            }
          }
        });
        // Send AJAX POST request
        $.ajax({
          url: url,
          type: 'POST',
          dataType: 'json',
          data: {
            'domain': domainId,
          },
          success: function (data) {
            if (data['result'] == 'success') {
              // Do something
            }
            if (data['message']) {
              displayToastTop({type: data['result'], string: data['message'], title: 'Domain Update'});
            }
          }
        });
      });
    });
  </script>

  {% comment %} Include the reusable delete confirmation modal and related scripts {% endcomment %}
  {% include "confirm_delete_modal.html" %}

  {% comment %} Insert modals for RichText previews on extra fields {% endcomment %}
  {% if domain_extra_fields_spec %}
    {% for field_spec in domain_extra_fields_spec %}
      {% url 'shepherd:domain_extra_field_json' domain.id field_spec.internal_name as extra_field_json_url %}
      {% include "user_extra_fields/extra_field_modal.html" with extra_fields=domain.extra_fields field_spec=field_spec lazy_json_url=extra_field_json_url preview_report=False %}
    {% endfor %}
    {% include "user_extra_fields/lazy_json_modal_script.html" %}
  {% endif %}

  {% comment %} Insert modals for additional domain details {% endcomment %}
  {% for checkout in domain.history_set.all %}
    {% if checkout.project|has_access:request.user %}
      {% include "snippets/domain_history_detail_modal.html" with checkout=checkout %}
    {% endif %}
  {% endfor %}
{% endblock %}