3. home_res_temp

{% extends 'base.html' %}
{% block content %}

<div class="container mt-5 py-5">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <div class="text-center mb-5">
                <h1 class="page-header">Главная страница</h2>
                <p class="lead text-muted">
                    Выберите дату для просмотра подробного отчета. Нажмите кнопку ниже, чтобы продолжить.
                </p>
            </div>

            <!-- Explanation Placeholder -->
            <div class="bg-light p-4 rounded-3 shadow-sm mb-5">
                <h4 class="fw-semibold text-dark mb-3">О сервисе</h4>
                <p class="text-muted">
                    Эта страница поможет вам проанализировать концентрацию кредитного портфеля по различным видам.
                </p>
            </div>

            <!-- Form Section -->
            <div class="card border-0 shadow-lg p-4 rounded-4">
                <div class="card-body">
                    <h4 class="fw-semibold text-center text-dark mb-4">Выбор даты отчета</h4>
                    <form action="" method="post" class="p-3">
                        {% csrf_token %}
                        <div class="mb-4">
                            {{ form.as_p }}
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-5 py-2 fw-medium">
                                Просмотреть отчет
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Table Section -->
            {% if table %}
            <div class="mt-5">
                <h4 class="fw-semibold text-dark mb-4 text-center">Результаты отчета</h4>
                <div class="table-responsive">
                    {{ table|safe }}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Optional Custom CSS for Enhanced Styling -->
<style>
    .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    }
    .btn-primary {
        background-color: #0057D8;
        border-color: #0057D8;
        transition: background-color 0.3s ease;
    }
    .btn-primary:hover {
        background-color: #0041A3;
        border-color: #0041A3;
    }
    .form-control:focus {
        border-color: #0057D8;
        box-shadow: 0 0 0 0.2rem rgba(0, 87, 216, 0.25);
    }
</style>

{% endblock content %}

{% extends "base.html" %}

{% block content %}
<style>
  
    .dashboard-wrapper {
        padding: 60px 20px;
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Layout structure */
    .grid-layout {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        position: relative;
        width: 100%;
    }

    /* Central Hub Styling */
    .center-hub {
        grid-column: 1 / -1;
        justify-self: center;
        width: 200px;
        height: 200px;
        background: white;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 4px solid #fff;
        z-index: 2;
        transition: all 0.3s ease;
        text-decoration: none;
        color: var(--text-warning);
        margin: -20px 0; /* Overlaps slightly for a connected feel */
    }

    .center-hub i { 
        font-size: 2.5rem; 
        color: var(--warning-soft);
        margin-bottom: 10px;
    }

    /* Standard Card Styling */
    .card-link {
        text-decoration: none;
        color: var(--text-dark);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .card-link:hover { transform: scale(1.05); }

    .custom-card {
        height: 140px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-weight: 600;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        background: white;
        border: 1px solid rgba(0,0,0,0.03);
        text-align: center;
    }

    .custom-card i { font-size: 1.8rem; opacity: 0.8; }

    /* Gradients */
    .grad-1 { background: linear-gradient(135deg, #e0eafc, #cfdef3); }
    .grad-2 { background: linear-gradient(135deg, #fdfbfb, #ebedee); }
    .grad-4 { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }
    .grad-5 { background: linear-gradient(135deg, #e6e9f0, #eef1f5); }

    /* Center hub specifically */
    .grad-center { background: radial-gradient(circle, #ffffff, #f0f4f8); border: 2px solid #ade24a; }

    @media (max-width: 600px) {
        .grid-layout { grid-template-columns: 1fr; }
        .center-hub { order: -1; margin: 20px 0; }
    }
</style>

<div class="dashboard-wrapper">
    <div class="header-section">
        <div class="container">
            <h1 class="page-header">Ежедневный мониторинг</h1>
            <h2>{{ balans_date_str }}</h2>
            <a href="{% url 'risk-home' %}" class="btn btn-info  btn-download ms-3" data-bs-toggle="tooltip" 
                    data-bs-placement="top" 
                    title="Select another date.">
                        <i class="fa-solid fa-calendar-days"></i> Календар</a>
            <p>
                Ознакомьтесь с ключевыми законами и нормативными актами, регулирующими управление банками. Эта страница предоставляет обзор важных правовых рамок, обеспечивающих соответствие, прозрачность и стабильность банковских операций. Нажмите на каждую карточку, чтобы узнать больше о конкретных законах.
            </p>
        </div>
    </div>

    <div class="grid-layout">
        <!-- Top Row -->
        <a href="{% url 'risk-appetite-home' %}" class="card-link">
            <div class="custom-card grad-1">
                <i class="fas text-primary fa-chart-line"></i>
                <span>АКР</span>
            </div>
        </a>
        <a href="{% url 'risk-limit-home' %}" class="card-link">
            <div class="custom-card grad-2">
                <i class="fas text-danger fa-id-card"></i>
                <span>Лимит по паспортам</span>
            </div>
        </a>

        <!-- Central Hub -->
        <a href="{% url 'risk-combined-home' %}" class="center-hub grad-center">
            <i class="fas text-warning fa-layer-group"></i>
            <span style="font-size: 1.1rem; font-weight: 700;">Свод Все</span>
        </a>

        <!-- Bottom Row -->
        <a href="{% url 'risk-plan-home' %}" class="card-link">
            <div class="custom-card grad-4">
                <i class="fas text-success fa-briefcase"></i>
                <span>Бизнес план</span>
            </div>
        </a>
        <a href="{% url 'risk-blockc-home' %}" class="card-link">
            <div class="custom-card grad-5">
                <i class="fas text-info fa-shield-alt"></i>
                <span>С Блок</span>
            </div>
        </a>
    </div>
</div>
{% endblock %}