{% load django_ledger %}
{% load i18n %}
<div class="table-container">
    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
        <thead>
            <tr>
                <th class="has-text-centered">Vendor</th>
                <th class="has-text-centered">Address</th>
                <th class="has-text-centered">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for vendor in vendors %}
                <tr class="has-text-centered">
                    <td>{{ vendor.vendor_name }}</td>
                    <td>{{ vendor.address_1 }}</td>
                    <td>
                        <div class="dropdown is-right is-hoverable" id="vendor-action-{{ vendor.uuid }}">
                            <div class="dropdown-trigger">
                                <button class="button is-small is-rounded is-outlined is-dark"
                                        aria-haspopup="true"
                                        aria-controls="dropdown-menu">
                                    <span>Actions</span>
                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
                                </button>
                            </div>
                            <div class="dropdown-menu" id="dropdown-menu-{{ vendor.uuid }}" role="menu">
                                <div class="dropdown-content">
                                    {#
<a href="" class="dropdown-item has-text-success">
View
</a>
                                #}
                                <a href="{% url 'django_ledger:vendor-update' entity_slug=view.kwargs.entity_slug vendor_pk=vendor.uuid %}"
                                   class="dropdown-item has-text-weight-bold has-text-info">
                                    {% trans 'Update' %}
                                </a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>
</div>
