{% 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">Buildings</li>
            </ol>
        </nav>
        <h2 class="h4">All buildings</h2>
        <p class="mb-0">View all building 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>Building</th>
                    <th>Code</th>
                    <th>Company</th>
                    <th>Address</th>
                    <th>Owner</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                <!-- Item -->
                {% if building_list %}
                {% for building in building_list %}
                <tr>
                    <td><a href="{{building.get_absolute_url}}">{{building.name}}</a></td>
                    <td><a href="{{building.get_absolute_url}}">{{building.unique_building_code}}</a></td>
                    <td><a href="{{building.company.get_absolute_url}}">{{ building.company.name }}</a></td>
                    <td><a href="{{ building.get_absolute_url }}">{{ building.address }}</a></td>
                    <td><span>{{ building.building_owner }}</span></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 fa-sm"></span>
                                </span>
                                <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu py-0">
                                <a class="dropdown-item rounded-top" href="{{ building.get_absolute_url }}">
                                    <span class="fas fa-eye me-2"></span>
                                    View Details
                                </a>
                                <a class="dropdown-item rounded-bottom" href="{% url 'building_edit' building.id%}">
                                    <span class="fas fa-edit me-2"></span>
                                    Edit
                                </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 buildings 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 %}