{% extends "layouts/base.html" %}

{% block title %} Companies {% 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="{% url 'companies' %}"><span class="fas fa-home"></span></a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Certificates</li>
            </ol>
        </nav>
        <h2 class="h4">All certificates</h2>
        <p class="mb-0">View all certificate details.</p>
    </div>
</div>

<div class="card card-body border-light pt-0">
    <div class="table-responsive py-4">
        <table class="table table-centered mb-0 rounded" id="datatable">
                <thead>
                <tr>
                    <th>Number</th>
                    <th>Date issued</th>
                    <th>Expiry date</th>
                    <th>Building</th>
                    <th>Company</th>
                    <th>Rating</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <!-- Item -->
                {% if certificate_list %}
                {% for certificate in certificate_list %}
                <tr>
                    <td><a href="{{certificate.get_absolute_url}}">{{certificate.certificate_number}}</a></td>
                    <td>{{ certificate.date_of_issue }}</td>
                    <td>{{certificate.end_date}}</td>
                    <td><a href="{{certificate.building.get_absolute_url}}">{{certificate.building}}</a></td>
                    <td><a href="{{certificate.building.company.get_absolute_url}}">{{certificate.building.company}}</a></td>
                    <td>{{certificate.energy_performance_scale}}</td>
                    <td></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                      <span class="icon icon-sm">
                                          <span class="fas fa-ellipsis-h icon-dark"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="{{certificate.building.get_absolute_url}}">
                                    <span class="fas fa-eye me-2"></span>
                                    View Details
                                </a>
<!--                                <a class="dropdown-item rounded-bottom" href="">-->
<!--                                    <span class="fas fa-check-circle me-2"></span>-->
<!--                                    Verify-->
<!--                                </a>-->
                                <a class="dropdown-item rounded-bottom" href="{% url 'download_certificate_csv' certificate.id %}">
                                    <span class="fas fa-file-csv me-2"></span>
                                    Export CSV
                                </a>
                                <a class="dropdown-item rounded-bottom" href="{% url 'generate_certificate_pdf' certificate.id %}" target="_blank">
                                    <span class="fas fa-file-pdf me-2"></span>
                                    Download PDF
                                </a>
                                <!--<a class="dropdown-item text-danger rounded-bottom" href="#"><span class="fas fa-trash-alt me-2"></span>Remove</a>-->
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td>No certificates are available.</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                {% endif %}
                <!-- End of Item -->
                </tbody>
            </table>
    </div>

    <div class="card-footer px-3 border-0 d-flex align-items-center justify-content-between">
        {% include 'partials/pagination.html' %}
    </div>
</div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
{% endblock javascripts %}