{# Onglets des écrans « Rendez-vous » + styles partagés (préfixe bk-).
   Variables : site, tab, canConfigure, toConfirm, planAllows #}
<style>
    .bk-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 1.25rem; padding-bottom: 2px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
    .bk-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .95rem; border-bottom: 3px solid transparent; color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
    .bk-tabs a:hover { color: var(--ink); }
    .bk-tabs a.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
    .bk-tabs .bk-sep { width: 1px; background: var(--line); margin: .5rem .35rem; flex: none; }
    .bk-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--action); color: #fff; font-size: .72rem; font-weight: 700; }

    .bk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 1.25rem; }
    .bk-card + .bk-card { margin-top: 1rem; }
    .bk-card h2, .bk-h2 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin: 0 0 .25rem; }
    .bk-muted { color: var(--text-muted); font-size: var(--text-sm); }
    .bk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
    .bk-head h1 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin: 0; }
    .bk-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
    .bk-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; font-size: var(--text-sm); text-decoration: none; cursor: pointer; }
    .bk-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
    .bk-btn.is-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
    .bk-btn.is-primary:hover { background: var(--brand-secondary); color: #fff; }
    .bk-btn.is-danger { color: #a61b1b; border-color: #f1c4c4; }
    .bk-btn.is-danger:hover { background: #fdecec; }
    .bk-btn.is-sm { min-height: 32px; padding: .25rem .7rem; font-size: .8rem; }
    .bk-btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-primary); color: var(--brand-primary); }
    .bk-inline { display: inline; margin: 0; }
    .bk-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--surface); color: var(--ink); }
    .bk-chip.is-confirmed, .bk-chip.is-done { background: #dcfce7; color: #166534; }
    .bk-chip.is-pending, .bk-chip.is-pending_payment { background: #fef3c7; color: #92400e; }
    .bk-chip.is-cancelled, .bk-chip.is-no_show { background: #fee2e2; color: #991b1b; }
    .bk-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
    .bk-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); }
    .bk-empty i { font-size: 2.2rem; opacity: .35; display: block; margin-bottom: .75rem; }
    .bk-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    .bk-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
    .bk-table td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
    .bk-table-wrap { overflow-x: auto; }
    .bk-form { display: grid; gap: 1rem; }
    .bk-grid-2 { display: grid; gap: 1rem; }
    @media (min-width: 768px) { .bk-grid-2 { grid-template-columns: 1fr 1fr; } .bk-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); } }
    .bk-field label, .bk-label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: .3rem; }
    .bk-field small, .bk-help { display: block; color: var(--text-muted); font-size: .8rem; margin-top: .25rem; }
    .bk-field input[type=text], .bk-field input[type=email], .bk-field input[type=tel], .bk-field input[type=number], .bk-field input[type=date], .bk-field input[type=time], .bk-field input[type=url], .bk-field select, .bk-field textarea {
        width: 100%; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #fff; font: inherit; font-size: 16px; color: var(--ink);
    }
    .bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-soft); }
    .bk-check { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--text-sm); }
    .bk-check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--brand-primary); flex: none; }
    .bk-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
    .bk-swatches label { position: relative; cursor: pointer; }
    .bk-swatches input { position: absolute; opacity: 0; }
    .bk-swatches span { display: block; width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); }
    .bk-swatches input:checked + span { box-shadow: 0 0 0 2px var(--ink); }
    .bk-swatches input:focus-visible + span { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
    .bk-callout { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--ink); margin-bottom: 1rem; }
    .bk-callout.is-warn { background: #fef3c7; }
    .bk-callout.is-ok { background: #dcfce7; }
    .bk-callout i { color: var(--brand-primary); margin-top: .2rem; }
    .bk-callout p { margin: 0; }
    .bk-copy { display: flex; gap: .5rem; }
    .bk-copy input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .8rem !important; }
</style>

{% set tabs = [
    {key: 'agenda', route: 'admin_booking_agenda', icon: 'fa-calendar-days', label: 'Agenda', count: toConfirm|default(0)},
    {key: 'customers', route: 'admin_booking_customers', icon: 'fa-address-book', label: 'Clients'},
    {key: 'stats', route: 'admin_booking_stats', icon: 'fa-chart-column', label: 'Statistiques'},
] %}
{% set setupTabs = [
    {key: 'services', route: 'admin_booking_services', icon: 'fa-list-check', label: 'Prestations'},
    {key: 'team', route: 'admin_booking_team', icon: 'fa-user-clock', label: 'Équipe & horaires'},
    {key: 'closures', route: 'admin_booking_closures', icon: 'fa-umbrella-beach', label: 'Fermetures'},
    {key: 'settings', route: 'admin_booking_settings', icon: 'fa-sliders', label: 'Réglages'},
] %}
<nav class="bk-tabs" aria-label="Rendez-vous">
    {% for t in tabs %}
        <a href="{{ path(t.route, {siteId: site.id}) }}" class="{{ tab == t.key ? 'is-active' : '' }}" {% if tab == t.key %}aria-current="page"{% endif %}>
            <i class="fas {{ t.icon }}" aria-hidden="true"></i>{{ t.label }}
            {% if t.count|default(0) > 0 %}<span class="bk-count" title="{{ t.count }} à confirmer">{{ t.count }}</span>{% endif %}
        </a>
    {% endfor %}
    {% if canConfigure %}
        <span class="bk-sep" aria-hidden="true"></span>
        {% for t in setupTabs %}
            <a href="{{ path(t.route, {siteId: site.id}) }}" class="{{ tab == t.key ? 'is-active' : '' }}" {% if tab == t.key %}aria-current="page"{% endif %}>
                <i class="fas {{ t.icon }}" aria-hidden="true"></i>{{ t.label }}
            </a>
        {% endfor %}
    {% endif %}
</nav>

{% if not planAllows %}
    <div class="bk-callout is-warn" role="note">
        <i class="fas fa-lock" aria-hidden="true"></i>
        <p>La prise de rendez-vous en ligne fait partie de l'offre {{ plan_name_for_tier('pro') }}. Vos rendez-vous déjà pris restent consultables et seront honorés (rappels compris), mais le site n'en accepte plus de nouveaux.
            <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}">Voir les offres</a></p>
    </div>
{% endif %}

{% for type, flashes in app.flashes(['success', 'danger', 'warning']) %}
    {% for message in flashes %}
        <div class="alert alert-{{ type }} d-flex align-items-center mb-3" role="{{ type == 'success' ? 'status' : 'alert' }}">
            <i class="fas fa-{{ type == 'success' ? 'check-circle' : 'exclamation-triangle' }} me-2" aria-hidden="true"></i>
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}