{% 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><span class="fas fa-home"></span></a></li>
                    <li class="breadcrumb-item active" aria-current="page">Companies</li>
                </ol>
            </nav>
            <h2 class="h4">All companies</h2>
            <p class="mb-0">View all company details.</p>
        </div>
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
            <div class="btn-toolbar dropdown">
                <button class="btn btn-primary btn-sm mr-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="fas fa-plus mr-2"></span> Actions
                </button>
                <div class="dropdown-menu dashboard-dropdown dropdown-menu-right mt-2">
                    <a class="dropdown-item font-weight-bold rounded" href="{% url 'company_create' %}"><span class="fas fa-plus mr-2"></span>New company</a>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-body border-light shadow-sm table-wrapper pt-0">
        <div class="table-responsive py-4">
            <table class="table table-hover" id="datatable">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% if company_list %}
                    {% for company in company_list %}
                        <tr>
                            <td><a href="{{ company.get_absolute_url }}">{{ company.name }}</a></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="{{ company.get_absolute_url }}">
                                            <span class="fas fa-eye mr-2"></span>
                                            View details
                                        </a>
                                        <a class="dropdown-item rounded-bottom" href="{% url 'company_edit' company.id %}">
                                            <span class="fas fa-edit mr-2"></span>
                                            Edit
                                        </a>
                                        <!--<a class="dropdown-item rounded-bottom text-danger" href="#"><span class="fas fa-trash-alt mr-2"></span>Remove</a>-->
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td>
                            No companies are available.
                        </td>
                        <td></td>
                    </tr>
                {% endif %}

                </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>

{% endblock content %}

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