{% extends 'base/layout.html' %}
{% load i18n %}
{% load proxbox_tags %}

{% block title %}{% trans "Schedule Proxbox Sync" %}{% endblock %}

{% block content %}
<div class="row">
    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">
                <i class="mdi mdi-clock-outline"></i>
                {% trans "Schedule Sync Job" %}
            </h5>
            <div class="card-body">
                <p class="text-muted">
                    {% blocktrans trimmed %}
                    Schedule a ProxBox sync operation to run at a specific time. Set a recurrence interval
                    to repeat the sync automatically (e.g. every 4 hours, daily, weekly).
                    Leave <strong>Schedule at</strong> blank to run immediately.
                    {% endblocktrans %}
                </p>

                <form method="post">
                    {% csrf_token %}
                    {% if edit_job %}
                        <input type="hidden" name="edit_job_id" value="{{ edit_job }}">
                        <div class="alert alert-info mb-3">
                            <i class="mdi mdi-information"></i>
                            {% trans "You are editing an existing scheduled job. The original job will be cancelled when you save." %}
                        </div>
                    {% endif %}
                    {% include "netbox_proxbox/inc/schedule_sync_form_fields.html" %}

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="mdi mdi-clock-plus-outline"></i>
                            {% if edit_job %}{% trans "Update Schedule" %}{% else %}{% trans "Schedule" %}{% endif %}
                        </button>
                        <a href="{% url 'core:job_list' %}" class="btn btn-outline-secondary">
                            <i class="mdi mdi-format-list-bulleted"></i>
                            {% trans "View Sync Jobs" %}
                        </a>
                    </div>
                </form>
            </div>
        </div>

        {% if scheduled_jobs %}
        <div class="card mt-4">
            <h5 class="card-header">
                <i class="mdi mdi-calendar-clock"></i>
                {% trans "Scheduled Jobs" %}
            </h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <thead>
                        <tr>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Sync Types" %}</th>
                            <th>{% trans "Schedule" %}</th>
                            <th>{% trans "Interval" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th class="text-end">{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for job in scheduled_jobs %}
                        <tr>
                            <td class="align-middle">
                                <a href="{% url 'core:job' job.pk %}">{{ job.name|default:"Proxbox Sync" }}</a>
                            </td>
                            <td class="align-middle">
                                {% for st in job.sync_types %}
                                    <span class="badge rounded-pill text-bg-info">{{ st|sync_type_label }}</span>
                                {% endfor %}
                            </td>
                            <td class="align-middle">
                                {% if job.schedule %}
                                    {{ job.schedule }}
                                {% else %}
                                    <span class="text-muted">{% trans "Immediate" %}</span>
                                {% endif %}
                            </td>
                            <td class="align-middle">
                                {% if job.interval %}
                                    {% if job.interval >= 10080 %}
                                        {{ job.interval|div:10080 }} {% trans "weeks" %}
                                    {% elif job.interval >= 1440 %}
                                        {{ job.interval|div:1440 }} {% trans "days" %}
                                    {% elif job.interval >= 60 %}
                                        {{ job.interval|div:60 }} {% trans "hours" %}
                                    {% else %}
                                        {{ job.interval }} {% trans "minutes" %}
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">{% trans "One-time" %}</span>
                                {% endif %}
                            </td>
                            <td class="align-middle">
                                {% if job.status == 'pending' %}
                                    <span class="badge text-bg-secondary">{% trans "Pending" %}</span>
                                {% elif job.status == 'scheduled' %}
                                    <span class="badge text-bg-info">{% trans "Scheduled" %}</span>
                                {% elif job.status == 'running' %}
                                    <span class="badge text-bg-primary">{% trans "Running" %}</span>
                                {% elif job.status == 'completed' %}
                                    <span class="badge text-bg-success">{% trans "Completed" %}</span>
                                {% elif job.status == 'errored' %}
                                    <span class="badge text-bg-warning">{% trans "Errored" %}</span>
                                {% elif job.status == 'failed' %}
                                    <span class="badge text-bg-danger">{% trans "Failed" %}</span>
                                {% else %}
                                    <span class="badge text-bg-secondary">{{ job.status }}</span>
                                {% endif %}
                            </td>
                            <td class="text-end">
                                <a href="{% url 'plugins:netbox_proxbox:schedule_sync' %}?edit={{ job.pk }}" class="btn btn-sm btn-outline-primary" title="{% trans 'Edit' %}">
                                    <i class="mdi mdi-pencil"></i>
                                </a>
                                {% if job.status == 'pending' or job.status == 'scheduled' %}
                                <form method="post" class="d-inline">
                                    {% csrf_token %}
                                    <button type="submit" name="cancel_job" value="{{ job.pk }}" class="btn btn-sm btn-outline-danger" title="{% trans 'Cancel' %}" onclick="return confirm('{% trans "Are you sure you want to cancel this scheduled job?" %}')">
                                        <i class="mdi mdi-close-circle"></i>
                                    </button>
                                </form>
                                {% else %}
                                <form method="post" action="{% url 'core:job_proxbox_run' pk=job.pk %}" class="d-inline">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-sm btn-outline-success" title="{% trans 'Run' %}">
                                        <i class="mdi mdi-play"></i>
                                    </button>
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">
                <i class="mdi mdi-information-outline"></i>
                {% trans "Sync Types" %}
            </h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <thead>
                        <tr>
                            <th class="text-nowrap" style="width: 1%">{% trans "Type" %}</th>
                            <th>{% trans "Description" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-nowrap align-middle">
                                <span class="badge rounded-pill text-bg-red fw-normal">{% trans "All" %}</span>
                            </td>
                            <td class="align-middle">{% trans "Sync both devices (nodes) and virtual machines." %}</td>
                        </tr>
                        <tr>
                            <td class="text-nowrap align-middle">
                                <span class="badge rounded-pill text-bg-green fw-normal">{% trans "Devices" %}</span>
                            </td>
                            <td class="align-middle">{% trans "Sync Proxmox nodes as NetBox devices." %}</td>
                        </tr>
                        <tr>
                            <td class="text-nowrap align-middle">
                                <span class="badge rounded-pill text-bg-blue fw-normal">{% trans "Virtual Machines" %}</span>
                            </td>
                            <td class="align-middle">{% trans "Sync Proxmox VMs as NetBox virtual machines." %}</td>
                        </tr>
                        <tr>
                            <td class="text-nowrap align-middle">
                                <span class="badge rounded-pill text-bg-orange fw-normal">{% trans "VM Disks" %}</span>
                            </td>
                            <td class="align-middle">{% trans "Sync VM virtual disks (run after virtual machines)." %}</td>
                        </tr>
                        <tr>
                            <td class="text-nowrap align-middle">
                                <span class="badge rounded-pill text-bg-purple fw-normal">{% trans "VM Backups" %}</span>
                            </td>
                            <td class="align-middle">{% trans "Sync all VM backup records." %}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mt-3">
            <h5 class="card-header">
                <i class="mdi mdi-repeat"></i>
                {% trans "Common Intervals" %}
            </h5>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>{% trans "Example" %}</th>
                            <th>{% trans "Frequency" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td><strong>15 minutes</strong></td><td>{% trans "Frequent sync" %}</td></tr>
                        <tr><td><strong>1 hour</strong></td><td>{% trans "Hourly sync" %}</td></tr>
                        <tr><td><strong>4 hours</strong></td><td>{% trans "Regular sync" %}</td></tr>
                        <tr><td><strong>12 hours</strong></td><td>{% trans "Twice daily" %}</td></tr>
                        <tr><td><strong>1 day</strong></td><td>{% trans "Daily sync" %}</td></tr>
                        <tr><td><strong>1 week</strong></td><td>{% trans "Weekly sync" %}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}