<!-- Recurring Schedule List -->
<!-- Displays all recurring schedules for a project -->

<div class="space-y-4">
    {% if schedules %}
        {% for item in schedules %}
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4
                    {% if project_status == 'on_hold' or not item.schedule.enabled %}opacity-60{% endif %}">
            <div class="flex items-start justify-between gap-4">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-3 mb-2">
                        <h4 class="text-base font-semibold text-gray-900 dark:text-white">
                            {{ item.schedule.name }}
                        </h4>

                        <!-- Type badge -->
                        {% if item.schedule.schedule_type == 'weekly_calendar' %}
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                            Weekly
                        </span>
                        {% elif item.schedule.schedule_type == 'one_off' %}
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
                            One-Off
                        </span>
                        {% else %}
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
                            24/7 Cycle
                        </span>
                        {% endif %}

                        <!-- Status badge -->
                        {% if project_status == 'on_hold' %}
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                            On Hold
                        </span>
                        {% elif project_status == 'archived' %}
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                            Archived
                        </span>
                        {% elif item.schedule.enabled %}
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
                            Active
                        </span>
                        {% else %}
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                            Disabled
                        </span>
                        {% endif %}
                    </div>

                    <!-- Location info -->
                    {% if item.location %}
                    <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                        <span class="text-gray-500">Location:</span>
                        <a href="/projects/{{ project_id }}/nrl/{{ item.location.id }}"
                           class="text-seismo-orange hover:text-seismo-navy font-medium ml-1">
                            {{ item.location.name }}
                        </a>
                    </div>
                    {% endif %}

                    <!-- Schedule details -->
                    <div class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
                        {% if item.schedule.schedule_type == 'weekly_calendar' and item.pattern %}
                            <div class="flex flex-wrap gap-2">
                                {% set days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] %}
                                {% set day_abbr = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] %}
                                {% for day in days %}
                                    {% if item.pattern.get(day, {}).get('enabled') %}
                                    <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 rounded">
                                        {{ day_abbr[loop.index0] }}
                                        {{ item.pattern[day].get('start', '') }}-{{ item.pattern[day].get('end', '') }}
                                    </span>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% elif item.schedule.schedule_type == 'simple_interval' %}
                            <div>
                                Cycle at {{ item.schedule.cycle_time or '00:00' }} daily
                                {% if item.schedule.include_download %}
                                    (with download)
                                {% endif %}
                            </div>
                        {% elif item.schedule.schedule_type == 'one_off' %}
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
                                {% if item.schedule.start_datetime %}
                                    {{ item.schedule.start_datetime|local_datetime }} {{ timezone_abbr() }}
                                    &rarr;
                                    {{ item.schedule.end_datetime|local_datetime }} {{ timezone_abbr() }}
                                {% endif %}
                                {% if item.schedule.include_download %}
                                    (with download)
                                {% endif %}
                            </div>
                        {% endif %}

                        {% if item.schedule.next_occurrence %}
                        <div class="text-xs">
                            <span class="text-gray-400">Next:</span>
                            {{ item.schedule.next_occurrence|local_datetime }} {{ timezone_abbr() }}
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Actions (hidden when project is on hold or archived) -->
                {% if project_status not in ('on_hold', 'archived') %}
                <div class="flex items-center gap-2 flex-shrink-0">
                    {% if item.schedule.enabled %}
                    <button hx-post="/api/projects/{{ project_id }}/recurring-schedules/{{ item.schedule.id }}/disable"
                            hx-swap="none"
                            hx-on::after-request="htmx.trigger('#recurring-schedule-list', 'refresh')"
                            class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
                        Disable
                    </button>
                    {% else %}
                    <button hx-post="/api/projects/{{ project_id }}/recurring-schedules/{{ item.schedule.id }}/enable"
                            hx-swap="none"
                            hx-on::after-request="htmx.trigger('#recurring-schedule-list', 'refresh')"
                            class="px-3 py-1.5 text-sm bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-lg hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors">
                        Enable
                    </button>
                    {% endif %}

                    <button onclick="editSchedule('{{ item.schedule.id }}')"
                            class="px-3 py-1.5 text-sm bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
                        Edit
                    </button>

                    <button hx-delete="/api/projects/{{ project_id }}/recurring-schedules/{{ item.schedule.id }}"
                            hx-confirm="Delete this recurring schedule?"
                            hx-swap="none"
                            hx-on::after-request="htmx.trigger('#recurring-schedule-list', 'refresh')"
                            class="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-12 text-center">
            <svg class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No recurring schedules</h3>
            <p class="text-gray-500 dark:text-gray-400 mb-4">
                Create a schedule to automate monitoring start/stop times.
            </p>
            <button onclick="showCreateScheduleModal()"
                    class="px-4 py-2 bg-seismo-orange text-white rounded-lg hover:bg-seismo-navy transition-colors">
                Create Schedule
            </button>
        </div>
    {% endif %}
</div>

<script>
function editSchedule(scheduleId) {
    // For now, redirect to a future edit page or show details
    // The edit modal will be implemented later
    alert('Edit schedule: ' + scheduleId + '\n\nNote: Full edit functionality coming soon. For now, you can delete and recreate the schedule.');
}

function showCreateScheduleModal() {
    // Call the parent page's openScheduleModal function
    if (typeof openScheduleModal === 'function') {
        openScheduleModal();
    } else {
        alert('Please use the "Create Schedule" button in the Schedules tab.');
    }
}
</script>
