{% extends "django_countdown/blocked_base.html" %}
{% load static %}

{% comment %}
Bootstrap 5 flavoured blocked page. Pulls Bootstrap + Bootstrap Icons from
jsDelivr CDN. If you'd rather host them, copy this template into your project
as "django_countdown/blocked_bootstrap.html" and override the stylesheet block.
{% endcomment %}

{% block blocked_stylesheets %}
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body.maintenance-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
        }
        .maintenance-container {
            max-width: 600px;
            width: 100%;
            margin: 1rem;
            padding: 2rem;
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
            text-align: center;
        }
        .maintenance-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .maintenance-icon { font-size: 2.5rem; color: #dc3545; }
        .maintenance-title { color: #212529; }
        .maintenance-message {
            font-weight: 600;
            color: #842029;
            background: #f8d7da;
            padding: .75rem;
            border-radius: .5rem;
            margin-bottom: 1rem;
        }
        .countdown-timer {
            font-size: 1.25rem;
            font-weight: 700;
            color: #0d6efd;
            background: #cfe2ff;
            border: 2px solid #0d6efd;
            border-radius: .5rem;
            padding: 1rem;
            margin: 1rem 0;
        }
        .countdown-timer.countdown-timer--indefinite {
            color: #664d03;
            background: #fff3cd;
            border-color: #ffc107;
            font-size: 1rem;
        }
        .countdown-label { font-size: .85rem; color: #6c757d; }
        .maintenance-footer { color: #6c757d; font-size: .85rem; margin-top: 1rem; border-top: 1px solid #dee2e6; padding-top: 1rem; }
    </style>
{% endblock %}

{% block blocked_header_icon_left %}
    <i class="bi bi-wrench-adjustable maintenance-icon"></i>
{% endblock %}

{% block blocked_header_icon_right %}
    <i class="bi bi-gear maintenance-icon"></i>
{% endblock %}