{% import 'v3/partials/_macros.html' as ui %}
{# No inline script: static/v3/js/pages/schedule.js draws both schedule
   pickers from the data-*-config attributes, reports each form's save and
   keeps the dim brightness label current. The page registry
   (static/v3/js/core/registry.js) starts it when this root appears and stops
   it when the partial is swapped away. The forms carry data-reports-result so
   app.js leaves the save notification to the page. #}
<div data-page="schedule"
     data-schedule-config='{{ schedule_config | tojson }}'
     data-dim-schedule-config='{{ dim_schedule_config | tojson }}'>
<div class="bg-white rounded-lg shadow p-6">
    <div class="border-b border-gray-200 pb-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-900">Schedule Settings</h2>
        <p class="mt-1 text-sm text-gray-600">Configure when the LED matrix display should be active. You can set global hours or customize times for each day of the week.</p>
    </div>

    {{ ui.settings_filter() }}

    <form id="schedule_form"
          hx-post="/api/v3/config/schedule"
          hx-ext="json-enc"
          hx-headers='{"Content-Type": "application/json"}'
          hx-swap="none"
          data-reports-result
          class="space-y-6">

        <!-- Schedule Picker Widget Container -->
        <div id="schedule_picker_container"></div>

        <!-- Submit Button -->
        <div class="flex justify-end">
            <button type="submit"
                    class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-save mr-2"></i>
                Save Schedule Settings
            </button>
        </div>
    </form>
</div>

<!-- Dim Schedule Section -->
<div class="bg-white rounded-lg shadow p-6 mt-6">
    <div class="border-b border-gray-200 pb-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-900">Dim Schedule Settings</h2>
        <p class="mt-1 text-sm text-gray-600">Configure when the display should automatically dim to a lower brightness. Dimming only applies when the display is ON (active per the schedule above). The dim schedule will not turn the display back on if it's off.</p>
    </div>

    <form id="dim_schedule_form"
          hx-post="/api/v3/config/dim-schedule"
          hx-ext="json-enc"
          hx-headers='{"Content-Type": "application/json"}'
          hx-swap="none"
          data-reports-result
          class="space-y-6">

        <!-- Dim Brightness Level -->
        <div class="form-group bg-gray-50 rounded-lg p-4 mb-4" id="setting-schedule-dim_brightness" data-setting-key="dim_schedule.dim_brightness">
            <label for="dim_brightness" class="block text-sm font-medium text-gray-700 mb-2">
                Dim Brightness Level{{ ui.help_tip('Brightness the display drops to during dim hours (0–100%).\nApplies only while the display is on. Your normal brightness is currently ' ~ normal_brightness ~ '%.', 'Dim Brightness Level') }}
            </label>
            <div class="flex items-center space-x-4">
                <input type="range"
                       id="dim_brightness"
                       name="dim_brightness"
                       min="0"
                       max="100"
                       value="{{ dim_schedule_config.dim_brightness | default(30) }}"
                       class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600">
                <span id="dim_brightness_display" class="text-sm font-medium text-gray-700 w-12 text-right">
                    {{ dim_schedule_config.dim_brightness | default(30) }}%
                </span>
            </div>
        </div>

        <!-- Dim Schedule Picker Widget Container -->
        <div id="dim_schedule_picker_container"></div>

        <!-- Submit Button -->
        <div class="flex justify-end">
            <button type="submit"
                    class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-save mr-2"></i>
                Save Dim Schedule Settings
            </button>
        </div>
    </form>
</div>

<!-- Plugin Schedules Section (config plugin_schedules, src/plugin_schedule.py) -->
<div class="bg-white rounded-lg shadow p-6 mt-6">
    <div class="border-b border-gray-200 pb-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-900">Plugin Schedules</h2>
        <p class="mt-1 text-sm text-gray-600">Choose when each plugin may show. Outside its schedule a plugin is skipped in the rotation and in Vegas mode; it stays loaded, and on-demand still shows it. "Hide while a game is live" skips it whenever any plugin has a live game, so on gameday you only see scores.</p>
    </div>

    {% if plugin_schedule_rows %}
    <div class="space-y-3">
        {% for row in plugin_schedule_rows %}
        <details class="border border-gray-200 rounded-md">
            <summary class="cursor-pointer px-4 py-3 text-sm font-medium text-gray-900">
                {{ row.name }}
                {% if row.schedule.enabled or row.schedule.hide_when_live %}
                <span class="ml-2 text-xs text-blue-700">scheduled</span>
                {% endif %}
            </summary>
            <form class="plugin-schedule-form px-4 pb-4 space-y-4"
                  hx-post="/api/v3/config/plugin-schedules"
                  hx-ext="json-enc"
                  hx-headers='{"Content-Type": "application/json"}'
                  hx-swap="none"
                  data-reports-result>
                <input type="hidden" name="plugin_id" value="{{ row.id }}">
                <label class="flex items-center text-sm text-gray-700">
                    <input type="checkbox" name="hide_when_live" class="mr-2"
                           {% if row.schedule.hide_when_live %}checked{% endif %}>
                    Hide while a game is live
                </label>
                <div id="plugin_schedule_picker_{{ loop.index }}"
                     data-plugin-schedule-config='{{ row.schedule | tojson }}'></div>
                <div class="flex justify-end">
                    <button type="submit"
                            class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                        <i class="fas fa-save mr-2"></i>
                        Save {{ row.name }} Schedule
                    </button>
                </div>
            </form>
        </details>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-gray-600">No enabled plugins.</p>
    {% endif %}
</div>
</div>