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

{% block content %}

    <!-- search rooms when many  -->
    {% if rooms|length > 2 %}
        <div class="container bg-primary">
            <label for="client-search-input">{% translate 'Filter Rooms' %}</label>
            <input class="form-control" type="text" placeholder="{% translate 'Search' %}" id="client-search-input"
                   _="on input
                                                        tell <a/> in <li/>
                                                            show closest <li/>
                                                            when your textContent.toLowerCase()
                                                            contains my value.toLowerCase()
                                                        end">
        </div>
    {% endif %}

<!-- list of Room Calendars -->
    <ul class="list-group">
        {% for calendar in rooms %}
            <li class="list-group-item my-2">
                <div class="row">
                    <div class="col">
                        <span class="display-5">
                            <a class="link-secondary"
                               href="{% url 'room_calendar_app:edit_room_calendar' calendar.uuid %}"
                               hx-get="{% url 'room_calendar_app:edit_room_calendar' calendar.uuid %}"
                               hx-target="#modal-wrapper">
                        {{ calendar.name }}</a></span>

                    </div>

                <!-- code link for room share -->
                    <div class="col">
                    <span>Share Room code</span>
                                    <span class="bg-primary border" hidden id="code-{{ calendar.uuid }}">{{ calendar.uuid }}</span>
                    <button class="btn btn-outline-secondary btn-sm"
                            _="on click
                            put innerHTML of #code-{{ calendar.uuid }} into myText
                            call navigator.clipboard.writeText(myText)
                            remove .bi-clipboard from the first <i/> in me
                            add .bi-clipboard-check-fill to the first <i/> in me
                            end"
                    ><i class="bi bi-clipboard"></i>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm"
                            _="on click
                            put innerHTML of #code-{{ calendar.uuid }} into myText
                            call navigator.share({text:myText})
                            set my innerHTML to 'Copied!'
                            end"
                    ><i class="bi bi-share-fill"></i>
                    </button>

                    </div>

                    <div class="row">
                                                {% include 'room_calendar_app/auxiliary/form-tenant-partial.html' with calendar=calendar %}

                    </div>
                    <div class="row">

                        {% include 'room_calendar_app/auxiliary/tenant_list_info.html' with calendar=calendar %}
                    </div>

            </li>
        {% empty %}
            <li class="list-group-item">{% translate 'Add a new Room.' %}</li>
        {% endfor %}
    </ul>
{% endblock content %}