{% extends "base.html" %}

{% block title %}Settings{% endblock %}

{% block content %}
<div class="pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2 fw-bold">Configurations Center</h1>
    <p class="text-secondary mb-0">Customize and manage your auto-reply parameters.</p>
</div>

<div class="row">
    <!-- Navigation Tabs -->
    <div class="col-md-3 mb-4">
        <div class="nav flex-column nav-pills glass-card p-2 shadow-sm" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <button class="nav-link text-start active" id="v-pills-general-tab" data-bs-toggle="pill" data-bs-target="#v-pills-general" type="button" role="tab" aria-controls="v-pills-general" aria-selected="true">
                <i class="fa-solid fa-gears"></i> General
            </button>
            <button class="nav-link text-start" id="v-pills-schedule-tab" data-bs-toggle="pill" data-bs-target="#v-pills-schedule" type="button" role="tab" aria-controls="v-pills-schedule" aria-selected="false">
                <i class="fa-solid fa-calendar-days"></i> Off-Time Schedule
            </button>
            <button class="nav-link text-start" id="v-pills-vip-tab" data-bs-toggle="pill" data-bs-target="#v-pills-vip" type="button" role="tab" aria-controls="v-pills-vip" aria-selected="false">
                <i class="fa-solid fa-user-shield"></i> VIP Lists
            </button>
            <button class="nav-link text-start" id="v-pills-keywords-tab" data-bs-toggle="pill" data-bs-target="#v-pills-keywords" type="button" role="tab" aria-controls="v-pills-keywords" aria-selected="false">
                <i class="fa-solid fa-tag"></i> Ignore Keywords
            </button>
            <button class="nav-link text-start" id="v-pills-forwarding-tab" data-bs-toggle="pill" data-bs-target="#v-pills-forwarding" type="button" role="tab" aria-controls="v-pills-forwarding" aria-selected="false">
                <i class="fa-solid fa-share"></i> Auto Forward
            </button>
            <button class="nav-link text-start" id="v-pills-notifications-tab" data-bs-toggle="pill" data-bs-target="#v-pills-notifications" type="button" role="tab" aria-controls="v-pills-notifications" aria-selected="false">
                <i class="fa-solid fa-bell"></i> Notifications
            </button>
            <button class="nav-link text-start" id="v-pills-appearance-tab" data-bs-toggle="pill" data-bs-target="#v-pills-appearance" type="button" role="tab" aria-controls="v-pills-appearance" aria-selected="false">
                <i class="fa-solid fa-palette"></i> Web Appearance
            </button>
            <button class="nav-link text-start" id="v-pills-security-tab" data-bs-toggle="pill" data-bs-target="#v-pills-security" type="button" role="tab" aria-controls="v-pills-security" aria-selected="false">
                <i class="fa-solid fa-shield-halved"></i> Security & Telegram
            </button>
        </div>
    </div>

    <!-- Tab Contents -->
    <div class="col-md-9">
        <div class="tab-content" id="v-pills-tabContent">
            
            <!-- 1. GENERAL SETTINGS -->
            <div class="tab-pane fade show active" id="v-pills-general" role="tabpanel" aria-labelledby="v-pills-general-tab">
                <div class="card glass-card shadow-sm border-0">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-sliders text-primary me-2"></i> Auto-Reply Options</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="general">
                            
                            <div class="form-check form-switch mb-4">
                                <input class="form-check-input" type="checkbox" id="enabled" name="enabled" {% if config.enabled %}checked{% endif %}>
                                <label class="form-check-label fw-semibold" for="enabled">Enable Auto-Reply System Globally</label>
                                <div class="text-secondary small">Deactivating this turns off all outgoing auto replies immediately.</div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="reply_message" class="form-label fw-semibold">Auto-Reply Message Content</label>
                                <textarea class="form-control" id="reply_message" name="reply_message" rows="4" required>{{ config.reply_message or '' }}</textarea>
                                <small class="text-secondary">Markdown notation and emoji codes are fully supported.</small>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-semibold">Reply Frequency</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="reply_once" name="reply_once" {% if config.reply_once %}checked{% endif %}>
                                        <label class="form-check-label" for="reply_once">Reply Once per User Session</label>
                                    </div>
                                    <small class="text-secondary">If checked, subsequent messages from the same user will be ignored for X hours.</small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="reply_after_hours" class="form-label fw-semibold">Ignore Repeat Sender For (Hours)</label>
                                    <select class="form-select" id="reply_after_hours" name="reply_after_hours">
                                        <option value="1" {% if config.reply_after_hours == 1 %}selected{% endif %}>1 Hour</option>
                                        <option value="6" {% if config.reply_after_hours == 6 %}selected{% endif %}>6 Hours</option>
                                        <option value="12" {% if config.reply_after_hours == 12 %}selected{% endif %}>12 Hours</option>
                                        <option value="24" {% if config.reply_after_hours == 24 %}selected{% endif %}>24 Hours</option>
                                        <option value="48" {% if config.reply_after_hours == 48 %}selected{% endif %}>48 Hours</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="row mb-4">
                                <div class="col-md-4 mb-3">
                                    <label for="typing_delay" class="form-label fw-semibold">Base Typing Delay (Seconds)</label>
                                    <input type="number" class="form-control" id="typing_delay" name="typing_delay" min="0" value="{{ config.typing_delay }}" required>
                                    <small class="text-secondary">Shows "typing..." status.</small>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="random_delay_min" class="form-label fw-semibold">Random Delay Min (Sec)</label>
                                    <input type="number" class="form-control" id="random_delay_min" name="random_delay_min" min="0" value="{{ config.random_delay_min }}" required>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="random_delay_max" class="form-label fw-semibold">Random Delay Max (Sec)</label>
                                    <input type="number" class="form-control" id="random_delay_max" name="random_delay_max" min="0" value="{{ config.random_delay_max }}" required>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="timezone" class="form-label fw-semibold">Global System Timezone</label>
                                <select class="form-select" id="timezone" name="timezone">
                                    <option value="Asia/Dhaka" {% if config.timezone == 'Asia/Dhaka' %}selected{% endif %}>Asia/Dhaka (GMT+6)</option>
                                    <option value="UTC" {% if config.timezone == 'UTC' %}selected{% endif %}>UTC (GMT+0)</option>
                                    <option value="America/New_York" {% if config.timezone == 'America/New_York' %}selected{% endif %}>America/New_York (EST)</option>
                                    <option value="Europe/London" {% if config.timezone == 'Europe/London' %}selected{% endif %}>Europe/London (GMT)</option>
                                    <option value="Asia/Kolkata" {% if config.timezone == 'Asia/Kolkata' %}selected{% endif %}>Asia/Kolkata (GMT+5:30)</option>
                                    <option value="Asia/Singapore" {% if config.timezone == 'Asia/Singapore' %}selected{% endif %}>Asia/Singapore (GMT+8)</option>
                                </select>
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4">Save Configurations</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 2. OFF-TIME SCHEDULES -->
            <div class="tab-pane fade" id="v-pills-schedule" role="tabpanel" aria-labelledby="v-pills-schedule-tab">
                <div class="card glass-card shadow-sm border-0 mb-4">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-clock text-primary me-2"></i> Add Off-Time Period</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="schedule_add">
                            
                            <div class="row mb-3">
                                <div class="col-md-6 mb-3">
                                    <label for="start_time" class="form-label fw-semibold">Start Time</label>
                                    <input type="time" class="form-control" id="start_time" name="start_time" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="end_time" class="form-label fw-semibold">End Time</label>
                                    <input type="time" class="form-control" id="end_time" name="end_time" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="timezone" class="form-label fw-semibold">Schedule Timezone</label>
                                <select class="form-select" id="timezone" name="timezone">
                                    <option value="Asia/Dhaka" selected>Asia/Dhaka (GMT+6)</option>
                                    <option value="UTC">UTC (GMT+0)</option>
                                    <option value="America/New_York">America/New_York (EST)</option>
                                    <option value="Europe/London">Europe/London (GMT)</option>
                                    <option value="Asia/Kolkata">Asia/Kolkata (GMT+5:30)</option>
                                    <option value="Asia/Singapore">Asia/Singapore (GMT+8)</option>
                                </select>
                            </div>
                            
                            <div class="mb-4">
                                <label class="form-label fw-semibold d-block">Active Days</label>
                                <div class="d-flex flex-wrap gap-3">
                                    {% for day in ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="days" value="{{ day }}" id="day_{{ day }}" checked>
                                        <label class="form-check-label" for="day_{{ day }}">{{ day[:3] }}</label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4"><i class="fa-solid fa-plus me-1"></i> Add Schedule</button>
                        </form>
                    </div>
                </div>

                <!-- Existing Schedules Table -->
                <div class="card glass-card shadow-sm border-0">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold">Active Schedules List</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-3">Schedules Window</th>
                                        <th>Timezone</th>
                                        <th>Days</th>
                                        <th class="text-end pe-3">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if schedules %}
                                        {% for schedule in schedules %}
                                        <tr>
                                            <td class="ps-3 fw-bold">
                                                <i class="fa-solid fa-circle-play text-success me-1"></i>
                                                {{ schedule.start_time }} - {{ schedule.end_time }}
                                            </td>
                                            <td><span class="badge bg-secondary">{{ schedule.timezone }}</span></td>
                                            <td><small class="text-truncate d-inline-block" style="max-width: 250px;">{{ schedule.days }}</small></td>
                                            <td class="text-end pe-3">
                                                <form action="{{ url_for('settings') }}" method="POST" onsubmit="return confirm('Delete this schedule?');">
                                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                                    <input type="hidden" name="action" value="schedule_delete">
                                                    <input type="hidden" name="schedule_id" value="{{ schedule.id }}">
                                                    <button type="submit" class="btn btn-outline-danger btn-sm border-0"><i class="fa-solid fa-trash-can"></i></button>
                                                </form>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    {% else %}
                                        <tr>
                                            <td colspan="4" class="text-center py-4 text-secondary">
                                                No schedules configured. Auto-reply will use default config.
                                            </td>
                                        </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. VIP LISTS -->
            <div class="tab-pane fade" id="v-pills-vip" role="tabpanel" aria-labelledby="v-pills-vip-tab">
                <div class="card glass-card shadow-sm border-0 mb-4">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-user-shield text-primary me-2"></i> Add VIP Ignore Entry</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="vip_add">
                            
                            <div class="row mb-3">
                                <div class="col-md-6 mb-3">
                                    <label for="list_type" class="form-label fw-semibold">List Category</label>
                                    <select class="form-select" id="list_type" name="list_type" required>
                                        <option value="blacklist" selected>Blacklist (NEVER Auto-Reply)</option>
                                        <option value="whitelist">Whitelist (ONLY Auto-Reply if on Whitelist)</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="identifier" class="form-label fw-semibold">Identifier</label>
                                    <input type="text" class="form-control" id="identifier" name="identifier" placeholder="e.g. @username, +8801700000000, 12345678" required>
                                    <small class="text-secondary">Input User ID, Username (with @), or Phone Number.</small>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="note" class="form-label fw-semibold">Internal Note</label>
                                <input type="text" class="form-control" id="note" name="note" placeholder="Add description context">
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4"><i class="fa-solid fa-user-plus me-1"></i> Add Entry</button>
                        </form>
                    </div>
                </div>

                <!-- Existing VIP lists -->
                <div class="row g-4">
                    <!-- Whitelist -->
                    <div class="col-lg-6">
                        <div class="card glass-card shadow-sm border-0 h-100">
                            <div class="card-header bg-transparent border-0 pt-3 px-3">
                                <h6 class="fw-bold mb-0 text-success"><i class="fa-solid fa-circle-check"></i> Whitelisted Accounts</h6>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
                                        <tbody>
                                            {% if vip_whitelist %}
                                                {% for entry in vip_whitelist %}
                                                <tr>
                                                    <td class="ps-3 font-monospace">{{ entry.identifier }}</td>
                                                    <td><small class="text-secondary">{{ entry.note or '-' }}</small></td>
                                                    <td class="text-end pe-3">
                                                        <form action="{{ url_for('settings') }}" method="POST">
                                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                                            <input type="hidden" name="action" value="vip_delete">
                                                            <input type="hidden" name="vip_id" value="{{ entry.id }}">
                                                            <button type="submit" class="btn btn-outline-danger btn-sm border-0 py-0"><i class="fa-solid fa-trash-can"></i></button>
                                                        </form>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            {% else %}
                                                <tr>
                                                    <td class="text-center py-3 text-secondary">No whitelist rules active.</td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Blacklist -->
                    <div class="col-lg-6">
                        <div class="card glass-card shadow-sm border-0 h-100">
                            <div class="card-header bg-transparent border-0 pt-3 px-3">
                                <h6 class="fw-bold mb-0 text-danger"><i class="fa-solid fa-circle-minus"></i> Blacklisted Accounts</h6>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
                                        <tbody>
                                            {% if vip_blacklist %}
                                                {% for entry in vip_blacklist %}
                                                <tr>
                                                    <td class="ps-3 font-monospace">{{ entry.identifier }}</td>
                                                    <td><small class="text-secondary">{{ entry.note or '-' }}</small></td>
                                                    <td class="text-end pe-3">
                                                        <form action="{{ url_for('settings') }}" method="POST">
                                                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                                            <input type="hidden" name="action" value="vip_delete">
                                                            <input type="hidden" name="vip_id" value="{{ entry.id }}">
                                                            <button type="submit" class="btn btn-outline-danger btn-sm border-0 py-0"><i class="fa-solid fa-trash-can"></i></button>
                                                        </form>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            {% else %}
                                                <tr>
                                                    <td class="text-center py-3 text-secondary">No blacklist rules active.</td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 4. IGNORE KEYWORDS -->
            <div class="tab-pane fade" id="v-pills-keywords" role="tabpanel" aria-labelledby="v-pills-keywords-tab">
                <div class="card glass-card shadow-sm border-0 mb-4">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-tag text-primary me-2"></i> Add Blocked Keyword</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="keyword_add">
                            
                            <div class="mb-3">
                                <label for="keyword" class="form-label fw-semibold">Keyword Trigger</label>
                                <input type="text" class="form-control" id="keyword" name="keyword" placeholder="e.g. SOS, Emergency, Urgent, Call Me" required>
                                <small class="text-secondary">If this keyword is found anywhere in the incoming message, the auto-reply will be suppressed.</small>
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4"><i class="fa-solid fa-plus me-1"></i> Add Keyword</button>
                        </form>
                    </div>
                </div>

                <div class="card glass-card shadow-sm border-0">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold">Blocked Keywords List</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex flex-wrap gap-2">
                            {% if keywords %}
                                {% for kw in keywords %}
                                <div class="badge bg-secondary-subtle text-secondary border d-flex align-items-center p-2 rounded">
                                    <span class="fs-6 me-2">{{ kw.keyword }}</span>
                                    <form action="{{ url_for('settings') }}" method="POST" class="d-inline mb-0">
                                        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="action" value="keyword_delete">
                                        <input type="hidden" name="keyword_id" value="{{ kw.id }}">
                                        <button type="submit" class="btn btn-close btn-sm p-0 m-0" style="font-size: 0.6rem;"></button>
                                    </form>
                                </div>
                                {% endfor %}
                            {% else %}
                                <span class="text-secondary small">No keywords configured. All messages will trigger replies.</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 5. AUTO FORWARDING -->
            <div class="tab-pane fade" id="v-pills-forwarding" role="tabpanel" aria-labelledby="v-pills-forwarding-tab">
                <div class="card glass-card shadow-sm border-0">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-share text-primary me-2"></i> Forwarding Settings</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="forwarding">
                            
                            <div class="form-check form-switch mb-4">
                                <input class="form-check-input" type="checkbox" id="forward_enabled" name="forward_enabled" {% if config.forward_enabled %}checked{% endif %}>
                                <label class="form-check-label fw-semibold" for="forward_enabled">Enable Auto-Forwarding</label>
                                <div class="text-secondary small">Forward original incoming messages to another conversation endpoint.</div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="forward_target" class="form-label fw-semibold">Forward Target Endpoint</label>
                                <input type="text" class="form-control" id="forward_target" name="forward_target" value="{{ config.forward_target or 'saved_messages' }}" required>
                                <small class="text-secondary">Specify <code>saved_messages</code>, another Telegram @username, or a Group/Channel ID (e.g. -100123456789).</small>
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4">Save Forwarding Config</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 6. SMTP NOTIFICATIONS -->
            <div class="tab-pane fade" id="v-pills-notifications" role="tabpanel" aria-labelledby="v-pills-notifications-tab">
                <div class="card glass-card shadow-sm border-0">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-bell text-primary me-2"></i> Notification Settings</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="notification">
                            
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="desktop_notification_enabled" name="desktop_notification_enabled" {% if config.desktop_notification_enabled %}checked{% endif %}>
                                <label class="form-check-label fw-semibold" for="desktop_notification_enabled">Enable Desktop Notifications (Mock logs)</label>
                            </div>

                            <hr class="border-secondary-subtle my-4">

                            <div class="form-check form-switch mb-4">
                                <input class="form-check-input" type="checkbox" id="email_notification_enabled" name="email_notification_enabled" {% if config.email_notification_enabled %}checked{% endif %}>
                                <label class="form-check-label fw-semibold" for="email_notification_enabled">Enable Email Notifications (SMTP)</label>
                                <div class="text-secondary small">Receive alerts via email every time an auto-reply is sent.</div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-8 mb-3">
                                    <label for="smtp_server" class="form-label fw-semibold">SMTP Host</label>
                                    <input type="text" class="form-control" id="smtp_server" name="smtp_server" value="{{ config.smtp_server or '' }}" placeholder="mail.yourdomain.com">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="smtp_port" class="form-label fw-semibold">SMTP Port</label>
                                    <input type="number" class="form-control" id="smtp_port" name="smtp_port" value="{{ config.smtp_port or 587 }}">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6 mb-3">
                                    <label for="smtp_user" class="form-label fw-semibold">SMTP Username</label>
                                    <input type="email" class="form-control" id="smtp_user" name="smtp_user" value="{{ config.smtp_user or '' }}" placeholder="smtp@yourdomain.com">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="smtp_pass" class="form-label fw-semibold">SMTP Password</label>
                                    <input type="password" class="form-control" id="smtp_pass" name="smtp_pass" value="{{ config.smtp_pass or '' }}" placeholder="Enter Password">
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="smtp_recipient" class="form-label fw-semibold">Recipient Email Address</label>
                                <input type="email" class="form-control" id="smtp_recipient" name="smtp_recipient" value="{{ config.smtp_recipient or '' }}" placeholder="your-personal@email.com">
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4">Save Notification Options</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 7. WEB APPEARANCE -->
            <div class="tab-pane fade" id="v-pills-appearance" role="tabpanel" aria-labelledby="v-pills-appearance-tab">
                <div class="card glass-card shadow-sm border-0">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-palette text-primary me-2"></i> Custom Visual Appearance</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="appearance">
                            
                            <div class="row mb-3">
                                <div class="col-md-6 mb-3">
                                    <label for="site_name" class="form-label fw-semibold">Site Name / Logo Text</label>
                                    <input type="text" class="form-control" id="site_name" name="site_name" value="{{ config.site_name }}" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="theme" class="form-label fw-semibold">Branding Theme Mode</label>
                                    <select class="form-select" id="theme" name="theme">
                                        <option value="dark" {% if config.theme == 'dark' %}selected{% endif %}>Dark Mode (Default)</option>
                                        <option value="light" {% if config.theme == 'light' %}selected{% endif %}>Light Mode</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="primary_color" class="form-label fw-semibold">Accent Primary Brand Color</label>
                                <div class="d-flex align-items-center gap-2">
                                    <input type="color" class="form-control form-control-color border-0" id="primary_color" name="primary_color" value="{{ config.primary_color }}" title="Choose primary color">
                                    <span class="font-monospace text-secondary small">{{ config.primary_color }}</span>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="footer_text" class="form-label fw-semibold">HTML Footer Text Details</label>
                                <input type="text" class="form-control" id="footer_text" name="footer_text" value="{{ config.footer_text }}">
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4">Update Aesthetics</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 8. SECURITY & ACCOUNT -->
            <div class="tab-pane fade" id="v-pills-security" role="tabpanel" aria-labelledby="v-pills-security-tab">
                <!-- Telegram Session control -->
                <div class="card glass-card border-danger shadow-sm border-0 mb-4">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold text-danger"><i class="fa-brands fa-telegram me-2"></i> Telegram Client Manager</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-secondary small">Your Telegram Client is currently logged into: <strong>{{ config.tg_phone }}</strong></p>
                        
                        <div class="alert alert-warning border-0 small">
                            <i class="fa-solid fa-triangle-exclamation me-1"></i>
                            Logging out deletes local telegram session cache. You will need to re-verify OTP to start the listener daemon.
                        </div>

                        <form action="{{ url_for('settings') }}" method="POST" onsubmit="return confirm('Confirm Logout from Telegram?');">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="telegram_logout">
                            <button type="submit" class="btn btn-danger"><i class="fa-solid fa-right-from-bracket me-1"></i> Log Out Telegram Client</button>
                        </form>
                    </div>
                </div>

                <!-- Admin Password Change -->
                <div class="card glass-card shadow-sm border-0">
                    <div class="card-header bg-transparent border-0 pt-3 px-3">
                        <h5 class="fw-bold"><i class="fa-solid fa-key me-2 text-primary"></i> Change Admin Password</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('settings') }}" method="POST">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <input type="hidden" name="action" value="change_password">
                            
                            <div class="mb-3">
                                <label for="old_password" class="form-label fw-semibold">Current Password</label>
                                <input type="password" class="form-control" id="old_password" name="old_password" required>
                            </div>
                            
                            <div class="mb-4">
                                <label for="new_password" class="form-label fw-semibold">New Secure Password</label>
                                <input type="password" class="form-control" id="new_password" name="new_password" required>
                            </div>
                            
                            <button type="submit" class="btn btn-primary px-4">Update Credentials</button>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}