{% extends "base_generic.html" %}

{% block pagetitle %}My Active Assets{% endblock %}


{% block content %}
  <div class="active-assets-page">
    <header class="detail-page-heading resource-detail-heading">
      <div class="detail-page-heading-main resource-detail-heading-main">
        <span class="detail-eyebrow">Infrastructure</span>
        <h2>My Active Assets</h2>
        <p class="active-assets-intro">Infrastructure currently checked out to {{ request.user.get_username }}.</p>
      </div>
    </header>

    <div class="active-assets-grid">
      <section class="detail-panel active-assets-panel" aria-labelledby="active-domains-heading">
        <div class="detail-panel-header">
          <div>
            <span class="detail-eyebrow">Domains</span>
            <h4 id="active-domains-heading">Checked-out domains</h4>
          </div>
          <span class="library-count-badge active-assets-count">{{ domains|length }}</span>
        </div>

        {% if domains %}
          <div class="table-responsive data-table-frame">
            <table id="domainTable" class="tablesorter table table-hover active-assets-table">
              <thead>
                <tr>
                  <th class="text-start">Domain</th>
                  <th class="text-start">Health</th>
                  <th class="text-start">Project</th>
                  <th class="text-start">Purpose</th>
                  <th class="text-start">Check-in</th>
                  <th class="sorter-false text-end">Options</th>
                </tr>
              </thead>
              <tbody>
                {% for entry in domains %}
                  <tr>
                    <td class="align-middle text-start"><a class="table-primary-link" href="{{ entry.domain.get_absolute_url }}">{{ entry.domain.name }}</a></td>
                    <td class="align-middle text-start">
                      <span class="library-tag {% if entry.domain.health_status.health_status == 'Healthy' %}library-tag-success{% else %}library-tag-danger{% endif %}">{{ entry.domain.health_status }}</span>
                    </td>
                    <td class="align-middle text-start"><a class="table-primary-link" href="{{ entry.project.get_absolute_url }}">{{ entry.project }}</a></td>
                    <td class="align-middle text-start">{{ entry.activity_type }}</td>
                    <td class="align-middle text-start {% if entry.will_be_released %}active-assets-checkin-warning{% endif %}">{{ entry.end_date|date:"DATE_FORMAT" }}</td>
                    <td class="align-middle text-end">
                      <div class="table-row-actions">
                        <a class="table-row-action" title="Edit domain checkout" aria-label="Edit domain checkout"
                           href="{% url 'shepherd:history_update' entry.id %}"><i class="fas fa-pen" aria-hidden="true"></i></a>
                        <button type="button" class="table-row-action table-row-action-danger js-release-asset"
                                title="Release domain" aria-label="Release domain"
                                release-asset-csrftoken="{{ csrf_token }}"
                                release-asset-url="{% url 'shepherd:ajax_domain_release' entry.id %}"
                                release-asset-id="{{ entry.id }}"><i class="fas fa-undo" aria-hidden="true"></i></button>
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="empty-state">
            <p class="empty-state-title">No active domains</p>
            <p class="empty-state-description">Domains checked out to you will appear here until they are released.</p>
          </div>
        {% endif %}
      </section>

      <section class="detail-panel active-assets-panel" aria-labelledby="active-servers-heading">
        <div class="detail-panel-header">
          <div>
            <span class="detail-eyebrow">Servers</span>
            <h4 id="active-servers-heading">Checked-out servers</h4>
          </div>
          <span class="library-count-badge active-assets-count">{{ servers|length }}</span>
        </div>

        {% if servers %}
          <div class="table-responsive data-table-frame">
            <table id="serverTable" class="tablesorter table table-hover active-assets-table">
              <thead>
                <tr>
                  <th class="text-start">IP Address</th>
                  <th class="text-start">Project</th>
                  <th class="text-start">Purpose</th>
                  <th class="text-start">Role</th>
                  <th class="text-start">Check-in</th>
                  <th class="sorter-false text-end">Options</th>
                </tr>
              </thead>
              <tbody>
                {% for entry in servers %}
                  <tr>
                    <td class="align-middle text-start"><a class="table-primary-link operator-data" href="{{ entry.server.get_absolute_url }}">{{ entry.server.ip_address }}</a></td>
                    <td class="align-middle text-start"><a class="table-primary-link" href="{{ entry.project.get_absolute_url }}">{{ entry.project }}</a></td>
                    <td class="align-middle text-start">{{ entry.activity_type }}</td>
                    <td class="align-middle text-start">{{ entry.server_role }}</td>
                    <td class="align-middle text-start {% if entry.will_be_released %}active-assets-checkin-warning{% endif %}">{{ entry.end_date|date:"DATE_FORMAT" }}</td>
                    <td class="align-middle text-end">
                      <div class="table-row-actions">
                        <a class="table-row-action" title="Edit server checkout" aria-label="Edit server checkout"
                           href="{% url 'shepherd:server_history_update' entry.id %}"><i class="fas fa-pen" aria-hidden="true"></i></a>
                        <button type="button" class="table-row-action table-row-action-danger js-release-asset"
                                title="Release server" aria-label="Release server"
                                release-asset-csrftoken="{{ csrf_token }}"
                                release-asset-url="{% url 'shepherd:ajax_server_release' entry.id %}"
                                release-asset-id="{{ entry.id }}"><i class="fas fa-undo" aria-hidden="true"></i></button>
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="empty-state">
            <p class="empty-state-title">No active servers</p>
            <p class="empty-state-description">Servers checked out to you will appear here until they are released.</p>
          </div>
        {% endif %}
      </section>
    </div>
  </div>
{% endblock %}

{% block morescripts %}
  <script>
    $(document).ready(function() {
      $('.tablesorter').tablesorter({ cssAsc: 'down', cssDesc: 'up', cssNone: 'none' });
    });

    $('.js-release-asset').on('click', function () {
      const $action = $(this);
      const $row = $action.closest('tr');
      const url = $action.attr('release-asset-url');
      const assetId = $action.attr('release-asset-id');
      const csrftoken = $action.attr('release-asset-csrftoken');

      $.ajaxSetup({
        beforeSend: function(xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrftoken);
          }
        }
      });
      $action.prop('disabled', true);
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: { asset: assetId },
        success: function (data) {
          if (data.result === 'success') {
            $row.remove();
            $action.closest('table').trigger('update');
          } else {
            $action.prop('disabled', false);
          }
          if (data.message) {
            displayToastTop({type: data.result, string: data.message, title: 'Asset update'});
          }
        },
        error: function () {
          $action.prop('disabled', false);
        }
      });
    });
  </script>
{% endblock %}