{% extends "admin_base.html" %}
{% block title %}{% if is_edit %}Edit Profile{% else %}New Profile{% endif %} — Availability{% endblock %}

{% block page_title %}Availability Profile Form{% endblock %}
{% block admin_content %}
<main class="availability-profile-page">
    <header class="availability-profile-heading">
        <a class="mb-3 inline-flex min-h-11 items-center gap-2 text-sm font-medium text-muted  focus-visible:outline-2 focus-visible:outline-brand" href="/plugins/availability-profile/">← Back to profiles</a>
        <h1>{% if is_edit %}Edit availability profile{% else %}Create availability profile{% endif %}</h1>
        <p>Choose the hours when customers can book or use the services assigned to this profile.</p>
    </header>

<form class="availability-profile-form"
    data-profile-id="{% if profile and profile.id %}{{ profile.id }}{% endif %}"
    data-schedule="{% if profile and profile.schedule_data %}{{ profile.schedule_data }}{% endif %}" id="availability-profile-form">
    <div data-availability-notice aria-live="polite"></div>

    <div class="availability-profile-field">
        <label class="availability-profile-label" for="profileName">Profile name <span aria-hidden="true">*</span></label>
        <input type="text" id="profileName" value="{% if profile %}{{ profile.name }}{% endif %}"
            placeholder="e.g. Business hours or Weekend" class="form-control" required maxlength="120" autocomplete="off">
        <span class="availability-profile-help">Use a name your team will recognize when assigning this schedule to a catalog item.</span>
    </div>

    <section class="availability-profile-field" aria-labelledby="availabilityScheduleTitle">
        <h2 class="availability-profile-label text-base" id="availabilityScheduleTitle">
            Availability Schedule
        </h2>
        <p class="availability-profile-help" id="availabilityScheduleHelp">Select the hours you are available. Click a day to toggle its full row, an hour to toggle that hour for every day, or drag across cells. The grid scrolls horizontally on small screens.</p>

        <div id="scheduleGrid" class="mt-3" aria-describedby="availabilityScheduleHelp"></div>
        <input type="hidden" id="scheduleData" value='{% if profile and profile.schedule_data %}{{ profile.schedule_data }}{% else %}[]{% endif %}'>
    </section>

    <div class="availability-profile-actions">
        <button type="submit" class="btn btn-primary min-h-11 px-5">
            {% if is_edit %}Update Profile{% else %}Create Profile{% endif %}
        </button>
        <a href="/plugins/availability-profile/" class="btn btn-secondary min-h-11 px-5">Cancel</a>
    </div>
</form>
</main>

<script src="/static/js/availability-grid.js"></script>
<script src="/plugins/availability-profile/assets/availability-form.js"></script>
{% endblock %}

{% block scripts %}
<link rel="stylesheet" href="/plugins/availability-profile/assets/css/availability-profile.ui.css">
{% endblock %}