{% extends 'room_calendar_app/navs/rooms-nav.html' %}
{% load i18n %}
{% block content %}

<div class="card">
<div class="card-header">
  <h2 class="card-title">{% translate 'Tenancies' %}
      <i class="bi bi-plus-circle-fill"
         hx-get="{% url 'room_calendar_app:add_tenant' %}"
         hx-target="#modal-wrapper"
      ></i></h2>
</div>
<div class="card-body">

  <ul id="tenant-list" class="list-group">
    {% for tenant in tenant_list %}
        {% partialdef tenant_item_partial inline %}
      <li class="list-group-item
      list-group-item-action
      list-group-item-primary
      fade-out {{ status }}-shine-7">
      <div class="row">
          <div class="col">
        <a
        hx-get="{% url 'room_calendar_app:edit_tenant' tenant.uuid %}"
        hx-target="#modal-wrapper"
        >{{tenant.name}}</a>

          </div>
          <div class="col">
            <span>
          {{tenant.calendar}}
                {% if tenant.calendar %}
              <button class="btn btn-outline-secondary ms-2"><i class="bi bi-x-circle-fill text-danger mx-auto"
                hx-post="{% url 'room_calendar_app:unlink_tenant' tenant.uuid %}"
           hx-target="closest <span/>"
           hx-swap="outerHTML"
           hx-confirm="{% translate 'Un-link tenant'  %}"
        ></i></button>
                {% endif %}
            </span>
          </div>
          <div class="col">

              <i class="bi bi-copy"
                hx-post="{% url 'room_calendar_app:duplicate_tenant' tenant.uuid %}"
              hx-target="closest <li/>"
              hx-swap="afterend"
             data-bs-toggle="tooltip"
             data-bs-trigger="hover"
             data-bs-delay="500"
             data-bs-title="{% translate 'Duplicate' %}"
             data-bs-custom-class="custom-tooltip"
              ></i>
          </div>


              <!-- tenant link form -->
              {% include 'room_calendar_app/auxiliary/tenant-link-form.html' with form=form tenant=tenant %}


      </div>
    </li>
                {% endpartialdef tenant_item_partial %}

      {% empty %}
      <li class="list-group-item list-group-item-action list-group-item-primary">There are no tenants yet. </li>
      {% endfor %}
    </ul>
</div>

<div id="hx-helper"
  hx-get="{% url 'room_calendar_app:tenant_list' %}"
  hx-target="#tenant-list"
  hx-select="#tenant-list"
  hx-trigger="RefreshTable"
></div>
</div>

  {% endblock content %}