{% extends "layouts/base.html" %}
{% load indexing %}
{% block title %} Documents {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}


  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
      <div class="d-block mb-4 mb-md-0">
          <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
              <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                  <li class="breadcrumb-item">
                      <a href="/">
                          <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                      </a>
                  </li>
                  <li class="breadcrumb-item"><a href="/dashboard.html">BRACE2</a></li>
                  <li class="breadcrumb-item">Documents</li>
              </ol>
          </nav>
          <h2 class="h4">All Documents</h2>

      </div>
      <div class="btn-toolbar mb-2 mb-md-0">
        <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled" data-bs-placement="left">
          <div class="btn-group ms-2 ms-lg-3" disabled>
              <button type="button" class="btn btn-sm btn-outline-gray-600" onClick="print()" style="pointer-documents: none;">Print</button>
              <button type="button" class="btn btn-sm btn-outline-gray-600" style="pointer-documents: none;">Export</button>
          </div>
        </span>
      </div>
  </div>
  
  <div class="table-settings mb-4">
    <div class="row align-items-center justify-content-between">
      <div class="col col-md-6 col-lg-3 col-xl-4">
        <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-placement="right" title="Disabled">
        </span>
      </div>
    </div>
  </div>
  
  <div class="card card-body border-0 shadow table-wrapper table-responsive">
    <table class="table table-hover">
      <thead>
      <tr>
        <th>Title</th>
        <th>Date</th>
      </tr>
      </thead>
      <tbody>
        <tr style="cursor: pointer;" onClick="window.location='https://dot.ca.gov/-/media/dot-media/programs/research-innovation-system-information/documents/final-reports/v3-ca24-3703-final-report_7_30_2024.pdf';">
            <td>Phase I Final Report</a>
            </td>
            <td>May 2024</a></td>
          </tr>
      {% for document in documents %}
        <!--
          <tr style="cursor: pointer;" onClick="window.location='{{ ASSETS_ROOT }}/documents/{{ document.path }}';">
        -->
        <tr style="cursor: pointer;" onClick="window.location='{{ ASSETS_ROOT }}/documents/{{ document.path }}';">
            <td>{{ document.title }}</a>
              {% if document.draft %}
              <span class="badge text-bg-warning">DRAFT</span>
              {% endif %}
              {% if document.flags %}
                {% for flag in document.flags %}
                <span class="badge text-bg-info">{{ flag }}</span>
                {% endfor %}
              {% endif %}
            </td>
            <td>{{ document.date }}</a></td>
          </tr>
      {% endfor %}
      </tbody>
    </table>

  <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
      <nav aria-label="Page navigation example">
          <ul class="pagination mb-0">
              <li class="page-item">
                <a class="page-link disabled" href="#">Previous</a>
              </li>
              <li class="page-item disabled">
                <a class="page-link" href="#">1</a>
              </li>
              <!-- <li class="page-item">
                  <a class="page-link" href="#">2</a>
              </li> -->
              <li class="page-item disabled">
                  <a class="page-link" href="#">Next</a>
              </li>
          </ul>
      </nav>
      <div class="fw-normal small mt-4 mt-lg-0">Showing <b>{{ documents|length }}</b> out of <b>{{ documents|length}}</b> entries</div>
  </div>
</div>

{% endblock content %}


{% block javascripts %}
<script>
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
{% endblock javascripts %}
