{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}Bookable Items{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/booking/assets/css/booking.css">
{% endblock %}

{% block admin_content %}
<div data-plugin="booking">
    <div id="booking-crud-config"
         data-form-url="/plugins/booking/assets/admin/resource_form.json"
         data-save-url="/plugins/booking/api-resource-save"
         data-get-url="/plugins/booking/api-resource-get"
         data-create-title="Add bookable item"
         data-edit-title="Edit bookable item"
         data-entity="resource"
         data-venues="{{ venues | json_encode }}"></div>

    <div class="booking-filter-bar mb-5 grid grid-cols-1 items-end gap-3 sm:grid-cols-[auto_minmax(12rem,24rem)]">
        <label for="booking-venue-filter">Venue</label>
        <select id="booking-venue-filter" class="blocks-input">
            <option value="">All venues</option>
            {% for v in venues %}
            <option value="{{ v.id }}">{{ v.name }}</option>
            {% endfor %}
        </select>
    </div>

    {{ crud::shell_open(config_url="/plugins/booking/assets/admin/resources_list.json", mount_id="booking-resources-list", custom_mount=true) }}
    <table class="blocks-admin-table responsive-table">
        <thead></thead>
        <tbody>
            <tr><td colspan="7" class="crud-empty-state text-center">Loading bookable items…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}

    <div id="booking-form-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="booking-form-modal-title" aria-hidden="true">
        <div class="modal-content w-[calc(100%-2rem)] max-w-xl">
            <div class="modal-header">
                <h3 id="booking-form-modal-title">Bookable item</h3>
                <button type="button" class="close-btn booking-modal-close blocks-button blocks-button-secondary" aria-label="Close">&times;</button>
            </div>
            <div class="modal-body">
                <div id="booking-form-fields"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/booking/assets/js/icon_picker.js"></script>
<script src="/plugins/booking/assets/js/resource_form.js"></script>
<script src="/plugins/booking/assets/js/admin_crud.js"></script>
{% endblock %}