{% extends "base.html" %}

{% block content %}
<style>
    :root {
        --brand-indigo: #4f46e5;
        --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    }

    /* Page container */
    .activation-wrapper {
        max-width: 1050px;
        margin: 0 auto;
    }

    .custom-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
        margin-bottom: 22px;
    }

    /* Shop Identity Banner */
    .shop-banner {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        color: white;
        border-radius: 18px;
        padding: 24px 26px;
        box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12);
        margin-bottom: 22px;
        position: relative;
        overflow: hidden;
    }

    .shop-banner::after {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 170px; height: 170px;
        background: rgba(79, 70, 229, 0.2);
        border-radius: 50%;
        pointer-events: none;
    }

    .shop-avatar {
        width: 52px;
        height: 52px;
        background: rgba(255, 255, 255, 0.12);
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #818cf8;
        flex-shrink: 0;
    }

    /* Package Cards */
    .pkg-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
        margin-bottom: 22px;
    }

    .pkg-card {
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 20px;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pkg-card:hover {
        transform: translateY(-3px);
        border-color: #cbd5e1;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    }

    .pkg-card.active {
        border-color: var(--brand-indigo);
        background: #fdfdff;
        box-shadow: 0 8px 22px rgba(79, 70, 229, 0.14);
    }

    .pkg-card.active::before {
        content: '✓ Selected';
        position: absolute;
        top: 10px; right: 12px;
        font-size: 11px;
        font-weight: 700;
        color: var(--brand-indigo);
        background: #e0e7ff;
        padding: 2px 8px;
        border-radius: 20px;
    }

    .pay-info-box {
        background: #f8fafc;
        border: 1px dashed #cbd5e1;
        border-radius: 14px;
        padding: 14px 18px;
        margin-bottom: 20px;
    }

    .pay-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
    }

    .form-control, .form-select {
        border-radius: 10px;
        padding: 10px 14px;
        border-color: #cbd5e1;
        font-size: 14px;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--brand-indigo);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    }

    .btn-submit-pay {
        background: var(--brand-gradient);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 13px 20px;
        font-weight: 700;
        font-size: 15px;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .btn-submit-pay:hover {
        opacity: 0.95;
        transform: translateY(-1px);
        color: white;
    }

    .request-code-box {
        font-family: 'Courier New', monospace;
        background: #0f172a;
        color: #38bdf8;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 13px;
        word-break: break-all;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .upload-zone {
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        padding: 14px 18px;
        background: #f8fafc;
        transition: all 0.2s ease;
    }
    .upload-zone:hover {
        border-color: var(--brand-indigo);
        background: #f1f5f9;
    }
</style>

<div class="activation-wrapper py-2">

    <!-- Top Action Bar with Back Button -->
    <div class="mb-3 d-flex flex-wrap align-items-center justify-content-between gap-2">
        <a href="javascript:history.back()" class="btn btn-outline-secondary rounded-pill px-3 py-1.5 fw-semibold d-inline-flex align-items-center gap-1.5" style="font-size: 13.5px;">
            <i class="bi bi-arrow-left"></i> {{ l('Back', 'ফিরে যান') }}
        </a>

        <div class="d-flex align-items-center gap-2">
            <a href="{{ url_for('dashboard') }}" class="btn btn-outline-primary btn-sm rounded-pill px-3 fw-semibold">
                <i class="bi bi-speedometer2 me-1"></i>{{ l('Dashboard', 'ড্যাশবোর্ড') }}
            </a>
            <a href="{{ url_for('logout') }}" class="btn btn-outline-danger btn-sm rounded-pill px-3 fw-semibold" title="{{ l('Logout or Switch to another account', 'লগআউট অথবা অন্য অ্যাকাউন্টে প্রবেশ') }}">
                <i class="bi bi-box-arrow-right me-1"></i>{{ l('Logout', 'লগআউট') }}
            </a>
        </div>
    </div>

    <!-- 1. PROMINENT SHOP IDENTITY BANNER -->
    <div class="shop-banner">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="shop-avatar">
                    <i class="bi bi-shop"></i>
                </div>
                <div>
                    <span class="badge px-2.5 py-1 rounded-pill small mb-1" style="background: rgba(129, 140, 248, 0.2); color: #c7d2fe; font-size: 11px;">
                        {{ l('Client Shop Details', 'দোকানের পরিচিতি') }}
                    </span>
                    <h3 class="mb-0 fw-bold text-white">
                        {{ current_shop.shop_name if current_shop else l('Demo / Unregistered Shop', 'ডেমো / নতুন দোকান') }}
                    </h3>
                    <div class="d-flex flex-wrap align-items-center gap-3 mt-1.5 text-slate-300 small">
                        <span><i class="bi bi-person-fill text-indigo-300 me-1"></i><strong>{{ l('Owner', 'মালিক') }}:</strong> {{ current_shop.owner_name if current_shop and current_shop.owner_name else l('Not Set', 'দেওয়া নেই') }}</span>
                        <span><i class="bi bi-telephone-fill text-indigo-300 me-1"></i><strong>{{ l('Mobile', 'মোবাইল') }}:</strong> {{ current_shop.phone if current_shop and current_shop.phone else l('Not Set', 'দেওয়া নেই') }}</span>
                    </div>
                </div>
            </div>

            <!-- Expiry & Status Badges -->
            <div class="text-md-end">
                {% if is_expired %}
                <div class="badge bg-danger text-white px-3 py-2 fs-6 rounded-pill d-inline-flex align-items-center gap-1.5 shadow-sm">
                    <i class="bi bi-exclamation-octagon-fill"></i> {{ l('License Expired', 'মেয়াদ উত্তীর্ণ হয়েছে') }}
                </div>
                <div class="text-white-50 small mt-1">
                    {{ l('Expired On', 'মেয়াদ শেষ') }}: <strong class="text-white">{{ effective_expiry.strftime('%d-%m-%Y') if effective_expiry else 'N/A' }}</strong>
                </div>
                {% else %}
                <div class="badge bg-success text-white px-3 py-2 fs-6 rounded-pill d-inline-flex align-items-center gap-1.5 shadow-sm">
                    <i class="bi bi-check-circle-fill"></i> {{ l('License Active', 'লাইসেন্স সক্রিয় আছে') }}
                </div>
                <div class="text-white-50 small mt-1">
                    {{ l('Valid Till', 'মেয়াদ') }}: <strong class="text-white">{{ effective_expiry.strftime('%d-%m-%Y') if effective_expiry else 'N/A' }}</strong> ({{ trial_days_left }} {{ l('days left', 'দিন বাকি') }})
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 2. SUBSCRIPTION PACKAGE SELECTION & PAYMENT PROOF SUBMISSION -->
    <div class="custom-card">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-bag-check-fill text-primary me-2"></i>{{ l('Select Subscription Package', 'সাবস্ক্রিপশন প্যাকেজ নির্বাচন করুন') }}</h5>
                <small class="text-muted">{{ l('Choose a renewal plan, upload proof/screenshot, and submit for instant approval', 'প্যাকেজ নির্বাচন করে বিকাশ বা নগদ পেমেন্ট স্লিপ/স্ক্রিনশট আপলোড দিন') }}</small>
            </div>
        </div>

        <form method="POST" id="pkgRequestForm" enctype="multipart/form-data">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="requested_plan" id="selectedPlanInput" value="Monthly (Tk 500)">

            <!-- 3 Package Cards -->
            <div class="pkg-grid">
                <!-- Package 1: Monthly -->
                <div class="pkg-card active" onclick="selectPkg(this, 'Monthly (Tk 500)', 500)">
                    <div>
                        <span class="badge bg-primary-subtle text-primary rounded-pill mb-2 px-2.5 py-1 small fw-bold">{{ l('Monthly', 'মাসিক') }}</span>
                        <h4 class="fw-bold text-dark mb-1">{{ l('Tk 500', '৳৫০০') }} <span class="fs-6 text-muted fw-normal">/ {{ l('month', 'মাস') }}</span></h4>
                        <p class="text-muted small mb-0">{{ l('Monthly standard subscription', 'মাসে মাসে বিলিং সিস্টেম') }}</p>
                    </div>
                </div>

                <!-- Package 2: 6 Months -->
                <div class="pkg-card" onclick="selectPkg(this, '6 Month (Tk 2,800)', 2800)">
                    <div>
                        <span class="badge bg-success-subtle text-success rounded-pill mb-2 px-2.5 py-1 small fw-bold">{{ l('Best Value', 'সেরা অফার') }}</span>
                        <h4 class="fw-bold text-dark mb-1">{{ l('Tk 2,800', '৳২,৮০০') }} <span class="fs-6 text-muted fw-normal">/ {{ l('6 months', '৬ মাস') }}</span></h4>
                        <p class="text-success small fw-semibold mb-0">{{ l('Save Tk 200 discount!', '৳২০০ টাকা সাশ্রয়!') }}</p>
                    </div>
                </div>

                <!-- Package 3: 1 Year -->
                <div class="pkg-card" onclick="selectPkg(this, '1 Year (Tk 5,500)', 5500)">
                    <div>
                        <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill mb-2 px-2.5 py-1 small fw-bold">{{ l('Popular', 'জনপ্রিয়') }}</span>
                        <h4 class="fw-bold text-dark mb-1">{{ l('Tk 5,500', '৳৫,৫০০') }} <span class="fs-6 text-muted fw-normal">/ {{ l('1 year', '১ বছর') }}</span></h4>
                        <p class="text-warning-emphasis small fw-semibold mb-0">{{ l('Save Tk 500 discount!', '৳৫০০ টাকা সাশ্রয়!') }}</p>
                    </div>
                </div>
            </div>

            <!-- Merchant / Payment Account Guide -->
            <div class="pay-info-box">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                    <span class="fw-bold text-dark small"><i class="bi bi-wallet2 text-primary me-1"></i>{{ l('Vendor Payment Numbers (Send Money / Payment)', 'পেমেন্ট পাঠানোর নম্বরসমূহ') }}:</span>
                    <span class="text-muted small">{{ l('Send exact package amount and input TrxID below', 'নির্ধারিত পরিমাণ টাকা পাঠিয়ে ট্রানজেকশন আইডি দিন') }}</span>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <div class="pay-badge">
                        <span class="text-danger fw-bold">bKash</span>: <strong class="user-select-all">01745082679</strong> (Personal)
                    </div>
                    <div class="pay-badge">
                        <span class="text-warning-emphasis fw-bold">Nagad</span>: <strong class="user-select-all">01745082679</strong> (Personal)
                    </div>
                    <div class="pay-badge">
                        <span class="text-primary fw-bold">Rocket</span>: <strong class="user-select-all">01745082679</strong> (Personal)
                    </div>
                </div>
            </div>

            <!-- Payment Method & Trx ID Inputs -->
            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold text-dark small">{{ l('Payment Method *', 'পেমেন্ট মেথড *') }}</label>
                    <select name="payment_method" class="form-select fw-semibold" required>
                        <option value="bKash">{{ l('bKash (Personal / Merchant)', 'বিকাশ (পার্সোনাল / মার্চেন্ট)') }}</option>
                        <option value="Nagad">{{ l('Nagad', 'নগদ') }}</option>
                        <option value="Rocket">{{ l('Rocket', 'রকেট') }}</option>
                        <option value="Bank Transfer">{{ l('Bank Transfer', 'ব্যাংক ট্রান্সফার') }}</option>
                        <option value="Cash">{{ l('Cash', 'ক্যাশ') }}</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold text-dark small">{{ l('Transaction ID / Sender Number *', 'ট্রানজেকশন আইডি / প্রেরকের নম্বর *') }}</label>
                    <input type="text" name="trx_id" class="form-control" placeholder="{{ l('e.g. TRX92837482 or 017XXXXXXXX', 'যেমন: TRX92837482 অথবা 017XXXXXXXX') }}" required>
                </div>
            </div>

            <!-- NEW: Payment Proof Screenshot / Slip File Upload -->
            <div class="mb-3">
                <div class="upload-zone">
                    <label class="form-label fw-semibold text-dark small d-flex align-items-center justify-content-between mb-2">
                        <span><i class="bi bi-file-earmark-arrow-up text-primary fs-6 me-1"></i>{{ l('Upload Payment Screenshot / Slip (Image or PDF)', 'পেমেন্ট স্লিপ / স্ক্রিনশট আপলোড করুন (ছবি বা PDF)') }}</span>
                        <span class="badge bg-secondary-subtle text-secondary small">{{ l('PNG, JPG, PDF up to 10MB', 'PNG, JPG, PDF সর্বোচ্চ ১০MB') }}</span>
                    </label>
                    <input type="file" name="proof_file" class="form-control" accept="image/png,image/jpeg,image/jpg,image/webp,.pdf" id="proofFileInput" onchange="previewProofFile(this)">
                    
                    <!-- Live Preview Box -->
                    <div id="filePreviewContainer" class="mt-2.5 d-none">
                        <div class="p-2 border rounded-3 bg-white d-flex align-items-center justify-content-between shadow-sm">
                            <div class="d-flex align-items-center gap-2.5">
                                <img id="imagePreview" src="#" alt="Preview" class="rounded border" style="width: 46px; height: 46px; object-fit: cover; display: none;">
                                <div id="pdfPreviewIcon" class="text-danger fs-2 lh-1" style="display: none;"><i class="bi bi-file-earmark-pdf-fill"></i></div>
                                <div>
                                    <div id="fileNameText" class="fw-bold small text-dark text-truncate" style="max-width: 280px;"></div>
                                    <small id="fileSizeText" class="text-muted"></small>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-danger border-0" onclick="clearProofFile()" title="{{ l('Remove File', 'ফাইল মুছুন') }}">
                                <i class="bi bi-x-circle-fill fs-5"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold text-dark small">{{ l('Payment Note / Additional Details (Optional)', 'পেমেন্ট বিবরণ / অতিরিক্ত নোট (ঐচ্ছিক)') }}</label>
                <input type="text" name="proof_note" class="form-control" placeholder="{{ l('e.g. Paid BDT 2800 from bKash personal account', 'যেমন: বিকাশ পার্সোনাল নম্বর থেকে ২৮০০ টাকা পাঠানো হয়েছে') }}">
            </div>

            <button type="submit" class="btn btn-submit-pay w-100 shadow-sm">
                <i class="bi bi-send-fill me-2"></i>{{ l('Submit Payment Proof for Approval', 'পেমেন্ট প্রুফ জমা দিন ও অনুমোদনের জন্য পাঠান') }}
            </button>
        </form>
    </div>

    <!-- 3. PAYMENT RECEIPTS & HISTORY (IF ANY) -->
    {% if current_shop and current_shop.subscription_payments %}
    <div class="custom-card">
        <h5 class="fw-bold mb-3 text-dark"><i class="bi bi-receipt-cutoff text-primary me-2"></i>{{ l('Payment History & Official Receipts', 'পেমেন্ট হিস্টোরি ও মানি রিসিট') }}</h5>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="small text-muted">{{ l('Date', 'তারিখ') }}</th>
                        <th class="small text-muted">{{ l('Amount', 'পরিমাণ') }}</th>
                        <th class="small text-muted">{{ l('Method & Trx ID', 'পদ্ধতি ও Trx ID') }}</th>
                        <th class="small text-muted">{{ l('Status', 'স্ট্যাটাস') }}</th>
                        <th class="small text-muted text-end">{{ l('Actions & Receipt', 'অ্যাকশন ও রিসিট') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in current_shop.subscription_payments | reverse %}
                    <tr>
                        <td class="small">{{ p.payment_date.strftime('%d-%m-%Y') if p.payment_date else 'N/A' }}</td>
                        <td class="fw-bold text-dark">{{ l('Tk ', '৳') }}{{ "{:,.0f}".format(p.amount_paid or 0) }}</td>
                        <td>
                            <span class="badge bg-light text-dark border">{{ p.payment_method or 'bKash' }}</span>
                            <small class="text-muted ms-1 font-monospace">{{ p.transaction_id or '—' }}</small>
                            {% if p.payment_proof and (p.payment_proof.startswith('/static') or p.payment_proof.startswith('data:image') or p.payment_proof.endswith('.png') or p.payment_proof.endswith('.jpg') or p.payment_proof.endswith('.jpeg') or p.payment_proof.endswith('.webp') or p.payment_proof.endswith('.pdf')) %}
                                <div class="mt-1">
                                    <a href="{{ p.payment_proof }}" target="_blank" class="badge bg-primary-subtle text-primary border border-primary-subtle text-decoration-none px-2 py-0.5" style="font-size: 11px;">
                                        <i class="bi bi-paperclip me-0.5"></i>{{ l('View Slip', 'স্লিপ দেখুন') }}
                                    </a>
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            {% if p.status == 'Approved' %}
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1">{{ l('Approved', 'অনুমোদিত') }}</span>
                            {% elif p.status == 'Pending' %}
                            <span class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-2.5 py-1">{{ l('Pending Approval', 'অনুমোদনের অপেক্ষায়') }}</span>
                            {% else %}
                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1">{{ l('Rejected', 'বাতিল') }}</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <a href="{{ url_for('customer_receipt', payment_id=p.id) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-semibold" target="_blank">
                                <i class="bi bi-printer me-1"></i>{{ l('Receipt', 'রিসিট') }}
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- 4. OFFLINE ACTIVATION KEY CARD -->
    <div class="custom-card">
        <h5 class="fw-bold mb-1 text-dark"><i class="bi bi-key-fill text-warning me-2"></i>{{ l('Instant License Key Activation (Offline)', 'অফলাইন লাইসেন্স কী দিয়ে অ্যাক্টিভ করুন') }}</h5>
        <p class="text-muted small mb-3">{{ l('If the vendor owner provided an offline license key, copy your device code and paste the key below', 'ওনার প্রদত্ত অফলাইন লাইসেন্স কী থাকলে নিচে পেস্ট করে চালু করুন') }}</p>

        <label class="form-label fw-semibold text-dark small">{{ l('Device Request Code', 'ডিভাইস রিকোয়েস্ট কোড') }}:</label>
        <div class="request-code-box mb-3">
            <span id="reqCodeText">{{ request_code }}</span>
            <button type="button" class="btn btn-sm btn-outline-info text-white" onclick="copyRequestCode()" title="{{ l('Copy Code', 'কোড কপি করুন') }}">
                <i class="bi bi-clipboard" id="copyIcon"></i> <span id="copyText">{{ l('Copy', 'কপি') }}</span>
            </button>
        </div>

        <form method="POST">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
            <div class="mb-3">
                <label class="form-label fw-semibold text-dark small">{{ l('Activation Key', 'অ্যাক্টিভিশন কী') }}</label>
                <textarea class="form-control font-monospace" rows="3" name="activation_key" required placeholder="{{ l('Paste your 64-character activation key here...', 'এখানে অ্যাক্টিভিশন কী পেস্ট করুন...') }}"></textarea>
            </div>
            <button type="submit" class="btn btn-dark fw-bold px-4 py-2.5 rounded-3">
                <i class="bi bi-check-circle-fill me-1.5 text-success"></i>{{ l('Activate Device Now', 'ডিভাইস অ্যাক্টিভ করুন') }}
            </button>
        </form>
    </div>

</div>

<script>
function selectPkg(card, planName, amount) {
    document.querySelectorAll('.pkg-card').forEach(c => c.classList.remove('active'));
    card.classList.add('active');
    document.getElementById('selectedPlanInput').value = planName;
}

function copyRequestCode() {
    const code = document.getElementById('reqCodeText').innerText;
    navigator.clipboard.writeText(code).then(() => {
        const copyText = document.getElementById('copyText');
        const copyIcon = document.getElementById('copyIcon');
        copyText.innerText = 'Copied!';
        copyIcon.className = 'bi bi-check2';
        setTimeout(() => {
            copyText.innerText = 'Copy';
            copyIcon.className = 'bi bi-clipboard';
        }, 2000);
    });
}

function previewProofFile(input) {
    const container = document.getElementById('filePreviewContainer');
    const img = document.getElementById('imagePreview');
    const pdfIcon = document.getElementById('pdfPreviewIcon');
    const nameText = document.getElementById('fileNameText');
    const sizeText = document.getElementById('fileSizeText');

    if (input.files && input.files[0]) {
        const file = input.files[0];
        nameText.innerText = file.name;
        sizeText.innerText = (file.size / 1024).toFixed(1) + ' KB';
        container.classList.remove('d-none');

        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                img.style.display = 'block';
                pdfIcon.style.display = 'none';
            };
            reader.readAsDataURL(file);
        } else if (file.type === 'application/pdf' || file.name.endsWith('.pdf')) {
            img.style.display = 'none';
            pdfIcon.style.display = 'block';
        }
    }
}

function clearProofFile() {
    const input = document.getElementById('proofFileInput');
    input.value = '';
    document.getElementById('filePreviewContainer').classList.add('d-none');
    document.getElementById('imagePreview').style.display = 'none';
    document.getElementById('pdfPreviewIcon').style.display = 'none';
}
</script>
{% endblock %}