{% extends "base.html" %}
{% block title %}وضعیت Apply{% endblock %}
{% block content %}
<h2>وضعیت اعمال پروفایل</h2>
<p>پروفایل: <strong>{{ log.profile.name if log.profile else '-' }}</strong></p>
<p>وضعیت: <span class="badge bg-{% if log.status == 'confirmed' %}success{% elif log.status == 'failed' %}danger{% else %}warning{% endif %}">{{ log.status }}</span></p>

{% if not log.confirmed and log.status == 'pending_confirm' %}
<div class="alert alert-warning" id="rollback-alert">
    <strong>پنجره تست:</strong>
    <span id="countdown">{{ remaining_seconds }}</span> ثانیه تا rollback خودکار
</div>
<div class="d-flex gap-2 mb-4">
    <form method="post" action="{{ url_for('apply.confirm', log_id=log.id) }}">
        <button type="submit" class="btn btn-success">تأیید و نگه‌داشتن تغییرات</button>
    </form>
    <form method="post" action="{{ url_for('apply.rollback', log_id=log.id) }}">
        <button type="submit" class="btn btn-warning">Rollback دستی</button>
    </form>
</div>
{% endif %}

<h4>جزئیات مراحل</h4>
{% for step in details.get('steps', []) %}
<div class="card mb-2">
    <div class="card-body py-2">
        <div class="d-flex justify-content-between">
            <span><strong>{{ step.category }}</strong> — {{ step.get('mirror', '') }}</span>
            {% if step.get('success', True) %}
            <span class="text-success">موفق</span>
            {% else %}
            <span class="text-danger">ناموفق</span>
            {% endif %}
        </div>
        {% if step.get('message') %}<small class="text-muted">{{ step.message }}</small>{% endif %}
        {% if step.get('error') %}<small class="text-danger d-block">{{ step.error }}</small>{% endif %}
        {% if step.get('warning') %}<small class="text-warning d-block">{{ step.warning }}</small>{% endif %}
    </div>
</div>
{% endfor %}

<a href="{{ url_for('main.dashboard') }}" class="btn btn-secondary mt-3">داشبورد</a>
{% endblock %}

{% block scripts %}
{% if not log.confirmed and log.status == 'pending_confirm' %}
<script>
(function() {
    let remaining = {{ remaining_seconds }};
    const el = document.getElementById('countdown');
    const tick = setInterval(function() {
        remaining--;
        if (el) el.textContent = remaining;
        if (remaining <= 0) {
            clearInterval(tick);
            location.reload();
        }
    }, 1000);
})();
</script>
{% endif %}
{% endblock %}