{% extends "base_generic.html" %}

{% load bleach_tags custom_tags extra_fields %}

{% block pagetitle %}{{ primary_address }}{% endblock %}


{% block content %}

  <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">Reusable Server</span>
        <h2 class="operator-data">{{ primary_address }}</h2>
        <div class="detail-tag-list" aria-label="Server status and tags">
          {% if staticserver.name %}<span class="library-tag library-tag-info">{{ staticserver.name }}</span>{% endif %}
          <span class="library-tag {% if staticserver.server_status.server_status == 'Available' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ staticserver.server_status }}</span>
          {% for tag in staticserver.tags.names %}<span class="library-tag library-tag-neutral">{{ tag|bleach }}</span>{% endfor %}
        </div>
      </div>
      <div class="dropdown detail-page-heading-actions">
        <button id="server-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="server-actions-button">
      <a class="dropdown-item icon edit-icon" href="{% url 'shepherd:server_update' staticserver.id %}">Edit Details</a>
      <a class="dropdown-item icon add-icon" href="{% url 'shepherd:server_update' staticserver.id %}#addresses">Add Aux
        IP Address</a>
      {% if staticserver.server_status.server_status == "Available" %}
        <a class="dropdown-item icon checkout-icon" href="{% url 'shepherd:server_checkout' staticserver.id %}">Checkout
          Server</a>
      {% else %}
        <a class="dropdown-item icon block-icon" href="#">Server Unavailable</a>
      {% endif %}
      <a class="dropdown-item icon trash-icon" href="{% url 'shepherd:server_delete' staticserver.id %}">Delete</a>
        </div>
      </div>
    </header>

  <div class="infrastructure-detail-workspace">
    <!-- Navigation Tabs -->
    <ul id="tab-bar" class="nav nav-tabs nav-justified"
        js-update-tabs-url="{% url 'shepherd:ajax_update_server_badges' staticserver.id %}">
      {% include "snippets/server_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="server-details-heading">Server Details</h4>
          </div>
        </header>

        <div class="detail-layout">
          <section class="detail-panel" aria-labelledby="server-details-heading">
            <dl class="detail-grid">
              <div class="detail-field">
                <dt>Hostname</dt>
                <dd>{% if staticserver.name %}{{ staticserver.name }}{% else %}<span class="detail-empty">No hostname</span>{% endif %}</dd>
              </div>
              <div class="detail-field">
                <dt>Hosting provider</dt>
                <dd>{{ staticserver.server_provider }}</dd>
              </div>
              <div class="detail-field">
                <dt>Current status</dt>
                <dd><span class="library-tag {% if staticserver.server_status.server_status == 'Available' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ staticserver.server_status }}</span></dd>
              </div>
            </dl>
          </section>

          <section class="detail-panel infrastructure-description-panel" aria-labelledby="server-description-heading">
            <div class="detail-panel-header">
              <div>
                <span class="detail-eyebrow">Operator context</span>
                <h5 id="server-description-heading">Additional information</h5>
              </div>
            </div>
            <div class="detail-prose">
              {% if staticserver.description %}
                {{ staticserver.description|strip_empty_tags|bleach }}
              {% else %}
                <p class="detail-empty mb-0">No additional information has been provided for this server.</p>
              {% endif %}
            </div>
          </section>

          <section class="detail-panel" aria-labelledby="server-addresses-heading">
            <div class="detail-panel-header">
              <div>
                <span class="detail-eyebrow">Network identity</span>
                <h5 id="server-addresses-heading">Server addresses</h5>
              </div>
            </div>
            <div class="table-responsive data-table-frame mb-0">
              <table id="address-table" class="table">
                <thead>
                  <tr>
                    <th class="align-middle text-start">IP Address</th>
                    <th class="align-middle text-start">Assignment</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="align-middle text-start operator-data" data-label="IP Address">{{ staticserver.ip_address }}</td>
                    <td class="align-middle text-start" data-label="Assignment">Primary address</td>
                  </tr>
                  {% for addy in staticserver.auxserveraddress_set.all %}
                    <tr>
                      <td class="align-middle text-start operator-data" data-label="IP Address">{{ addy }}</td>
                      <td class="align-middle text-start" data-label="Assignment">{% if addy.primary %}Primary address{% else %}Additional address{% endif %}</td>
                    </tr>
                  {% endfor %}
                </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="server-history-heading">Server History</h4>
            <p class="content-section-intro">Entries are partially redacted when you cannot access the related client or project.</p>
          </div>
        </header>

        {% if staticserver.serverhistory_set.all %}
          <div class="table-responsive data-table-frame">
            <table id="server-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 pe-4 text-start">Server Role</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 text-end">Options</th>
              </tr>
              </thead>
              <tbody>
              {% for checkout in staticserver.serverhistory_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 }}</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">{{ checkout.server_role }}</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 %}
                      Missing Full Name ({{ 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">
                      <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:server_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:server_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 server out to a project to begin its usage history.</p>
          </div>
        {% endif %}
      </div>

      <!-- Notes Tab -->
      <div id="notes" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4 id="server-notes-heading">Server Notes</h4>
          </div>
          <a class="icon add-icon btn btn-primary btn-sm"
             href="{% url 'shepherd:server_note_add' staticserver.id %}">Add a Note</a>
        </header>
        {% if staticserver.servernote_set.all %}
          <div class="note-card-list">
            {% for note in staticserver.servernote_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:server_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_server_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 server description.</p>
          </div>
        {% endif %}
      </div>

      {% comment %} Extra Fields Tab {% endcomment %}
      {% if server_extra_fields_spec %}
        <div id="extra-fields" class="tab-pane">
          <header class="content-section-header">
            <div class="content-section-heading">
              <h4 id="server-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:server_update' staticserver.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 server_extra_fields_spec %}
              <section class="extra-field-card" aria-labelledby="server-extra-field-{{ field_spec.internal_name }}">
                <div class="extra-field-card-header">
                  <h5 id="server-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>staticserver.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=staticserver.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 %}
    </div>
  </div>
  </div>
{% endblock %}

{% block collapse_js %}
  {{ block.super }}
{% endblock %}

{% block morescripts %}
  <!-- jQuery Tablesorter Script -->
  <script>
    $(document).ready(function () {
      $("#server-history-table").tablesorter(
        {
          cssAsc: 'down',
          cssDesc: 'up',
          cssNone: 'none',
        }
      );
      $('.tablesorter').trigger('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 server_extra_fields_spec %}
    {% for field_spec in server_extra_fields_spec %}
      {% url 'shepherd:server_extra_field_json' staticserver.id field_spec.internal_name as extra_field_json_url %}
      {% include "user_extra_fields/extra_field_modal.html" with extra_fields=staticserver.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 %}
{% endblock %}