{% 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>
</div>