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

{% block title %} UI Forms {% endblock %}

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

{% block content %}

<div class="py-4">
    <nav aria-label="breadcrumb">
        <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"><a href="{% url 'buildings' %}">Buildings</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit energy source</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between w-100 flex-wrap">
        <div class="mb-3 mb-lg-0">
            <h1 class="h4">Energy source</h1>
            <p class="mb-0">Update building energy consumption.</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 mb-4">
        <div class="card border-light shadow-sm components-section">
            <div class="card-body">
                <!-- Form -->
                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}
                    {% include 'partials/form_fields.html' %}
                    {{ form.building }}
                    <input class="btn btn-primary" type="submit" value="Update">
                </form>
                <!-- End of Form -->
            </div>
        </div>
    </div>
</div>

<div class="card border-light shadow-sm mb-4">
    <div class="card-body">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <h2 class="h5">Linked documentation</h2>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-centered table-nowrap mb-0 rounded">
                <thead class="thead-light">
                <tr>
                    <th class="border-0">Document name</th>
                    <th class="border-0">Upload date</th>
                    <th class="border-0">Size</th>
                </tr>
                </thead>
                <tbody>
                <!-- Item -->
                {% if supporting_docs %}
                {% for document_linked in supporting_docs %}
                <tr>
                    <td><a href="{{ document_linked.supporting_doc.url }}" target="_blank">{{ document_linked.supporting_doc.name }}</a></td>
                    <td>{{ document_linked.upload_date }}</td>
                    <td>{{ document_linked.supporting_doc.size }}</td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td>None</td>
                    <td></td>
                    <td></td>
                </tr>
                {% endif %}
                <!-- End of Item -->
                </tbody>
            </table>
            <div class="card-footer px-3 border-0 d-flex align-items-center justify-content-between">
                {% include 'partials/pagination.html' %}
            </div>
        </div>
    </div>
</div>

{% endblock content %}

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