{% extends "base_generic.html" %}

{% load crispy_forms_tags custom_tags %}

{% load bleach_tags custom_tags %}

{% block pagetitle %}Project Library{% endblock %}


{% block content %}
  <div class="library-page project-library-page d-grid gap-4">
    <header class="library-page-heading">
      <div class="library-page-heading-main">
        <div class="library-page-title-row">
          <h2>Project Library</h2>
          <span class="library-result-count">{{ filter.qs|length }} project{{ filter.qs|length|pluralize }}</span>
        </div>
        <p>Find active and completed projects, review their execution windows, or create a new engagement.</p>
      </div>
      <div class="library-page-actions">
        <a class="btn btn-primary icon add-icon" role="button"
           href="{% url 'rolodex:project_create_no_client' %}">Create Project</a>
        {% if filter.qs|length > 0 %}
          <button id="resetSortBtn" class="btn btn-outline-secondary icon sync-icon"
                  type="button">Reset Sort</button>
        {% endif %}
      </div>
    </header>

    <div class="filter-form library-filters project-library-filters">
      {% crispy filter.form filter.helper %}
    </div>

    {% if not request.user|is_privileged %}
      <div class="context-note mb-0" role="note">
        <i class="fas fa-user-shield mt-1" aria-hidden="true"></i>
        <div>
          <strong>Showing projects you can access</strong>
          <div>Access comes from a project assignment, project invitation, or invitation to the related client.</div>
        </div>
      </div>
    {% endif %}

    <section class="library-results project-library-results" aria-label="Projects">
      {% if filter.qs|length == 0 %}
        <div class="empty-state m-3">
          {% if request.GET %}
            <p class="empty-state-title">No matching projects</p>
            <p class="empty-state-description">Try broadening your filters or reset them to view all accessible projects.</p>
            <a class="btn btn-outline-secondary btn-sm mt-3" href="{% url 'rolodex:projects' %}">Reset filters</a>
          {% elif not request.user|is_privileged %}
            <p class="empty-state-title">No accessible projects</p>
            <p class="empty-state-description">You will see a project here after you are assigned or invited to it.</p>
          {% else %}
            <p class="empty-state-title">No projects yet</p>
            <p class="empty-state-description">Create the first project to begin planning an engagement.</p>
            <a class="btn btn-primary btn-sm icon add-icon mt-3"
               href="{% url 'rolodex:project_create_no_client' %}">Create Project</a>
          {% endif %}
        </div>
      {% else %}
        <div class="table-responsive data-table-frame library-table-frame">
          <table id="projectTable" class="tablesorter table table-hover library-table library-table-wide">
            <thead>
              <tr>
                <th class="align-middle text-start">Client</th>
                <th class="align-middle text-start">Project</th>
                <th class="align-middle text-start">Project Type</th>
                <th class="sorter-date-range-dMMMyyyy align-middle text-start">Execution Window</th>
                <th class="sorter-false align-middle text-end">Details</th>
              </tr>
            </thead>
            <tbody>
              {% for project in filter.qs %}
                <tr>
                  <td class="align-middle text-start" data-label="Client">
                    <a class="table-primary-link" href="{{ project.client.get_absolute_url }}">
                      {{ project.client.name }}{% if project.client.short_name %} ({{ project.client.short_name }}){% endif %}
                    </a>
                  </td>
                  <td class="align-middle text-start library-primary-cell" data-label="Project">
                    <a class="table-primary-link library-primary-link" href="{{ project.get_absolute_url }}">
                      <span>{{ project.codename }}</span>
                      <i class="fas fa-arrow-right" aria-hidden="true"></i>
                    </a>
                  </td>
                  <td class="align-middle text-start" data-label="Project Type">
                    <span class="library-tag library-tag-info" title="{{ project.project_type }}">
                      <i class="fas fa-project-diagram" aria-hidden="true"></i>
                      <span class="library-tag-value">{{ project.project_type }}</span>
                    </span>
                  </td>
                  <td class="align-middle text-start" data-label="Execution Window"
                      data-text="{{ project.start_date|date:"Y-m-d" }}">
                    {{ project.start_date|date:"DATE_FORMAT" }} – {{ project.end_date|date:"DATE_FORMAT" }}
                  </td>
                  <td class="align-middle text-end" data-label="Details">
                    <div class="library-row-actions">
                      <button type="button" class="report-row-action"
                              title="Preview project" aria-label="Preview {{ project.codename }}"
                              onclick="openModal('#project_detail_{{ project.id }}')">
                        <i class="fas fa-eye" aria-hidden="true"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% endif %}
    </section>
  </div>
{% endblock %}

{% block morescripts %}
  {{ autocomplete_data|json_script:"project-autocomplete-data" }}
  <!-- jQuery Tablesorter Script -->
  <script>
    $(document).ready(function () {
      $('#projectTable').tablesorter(
        {
          cssAsc: 'down',
          cssDesc: 'up',
          cssNone: 'none',
          widgets: ['saveSort'],
          widgetOptions: {
            saveSort: true,
            storage_page: 'projectLibraryTable'
          }
        }
      );

      $('.tablesorter').trigger('update');

      $('#resetSortBtn').click(function() {
        $('#projectTable')
          .trigger('saveSortReset')
          .trigger('sortReset');
        return false;
      });
    });
  </script>

    {{ autocomplete_data|json_script:"project-autocomplete-data" }}
    {%  comment %} Enable autocomplete for the filter form {% endcomment %}
    <script>
      $(function () {
        const autocompleteData = JSON.parse(document.getElementById('project-autocomplete-data').textContent);
        $('#id_client').autocomplete({
          source: autocompleteData.clients
        });
        $('#id_codename').autocomplete({
          source: autocompleteData.codenames
        });
        $('#id_tags').autocomplete({
          source: autocompleteData.tags
        });
      });
    </script>


  {% comment %} Insert modals for additional project details {% endcomment %}
  {% for project in filter.qs %}
    {% include "snippets/project_detail_modal.html" with project=project %}
  {% endfor %}
{% endblock %}