{% extends 'base.html' %}

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

{% block mystyle %}
<style>
    .nav-pills .nav-link {
        padding: 5px 10px; /* Medium-sized buttons */
        font-size: 0.9rem;
    }
    /* Adjust tab navigation for small screens */
    @media (max-width: 768px) {
        .tab-content {
            margin-top: 20px;
        }

        .nav-pills {
            flex-direction: row !important;
            justify-content: center;
        }
        .nav-pills .nav-link {
            margin: 0 5px;
        }
    }
    /* Default for larger screens (vertical tabs) */
    @media (min-width: 769px) {
        .nav-pills {
            flex-direction: column !important;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container1">
    <!-- Breadcrumb Navigation -->
    <div class="breadcrumb-container mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Settings</li>
            </ol>
        </nav>
    </div>

    <!-- Tabs for Settings -->
    <div class="row">
        <div class="col-md-3 col-12">
            <div class="nav nav-pills d-flex" id="settings-tabs" role="tablist">
                <button class="nav-link active" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
                    General
                </button>
                <button class="nav-link" id="account-tab" data-bs-toggle="pill" data-bs-target="#account" type="button" role="tab" aria-controls="account" aria-selected="false">
                    Account
                </button>
                <button class="nav-link" id="notification-tab" data-bs-toggle="pill" data-bs-target="#notification" type="button" role="tab" aria-controls="notification" aria-selected="false">
                    Notification
                </button>
            </div>
        </div>
        <div class="col-md-6 col-12">
            <div class="tab-content" id="settings-tabs-content">
                <!-- General Settings -->
                <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                    <h3>General Settings</h3>
                    <form>
                        <div class="mb-3">
                            <label for="language" class="form-label">Language</label>
                            <select class="form-select" id="language">
                                <option selected>English</option>
                                <option>Spanish</option>
                                <option>French</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="timezone" class="form-label">Time Zone</label>
                            <select class="form-select" id="timezone">
                                <option selected>UTC</option>
                                <option>GMT</option>
                                <option>PST</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
                    </form>
                </div>

                <!-- Account Settings -->
                <div class="tab-pane fade" id="account" role="tabpanel" aria-labelledby="account-tab">
                    <h3>Account Settings</h3>
                    <form>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" class="form-control" id="email" placeholder="Enter your email">
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" class="form-control" id="password" placeholder="Enter new password">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Update Account</button>
                    </form>
                </div>

                <!-- Notification Settings -->
                <div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab">
                    <h3>Notification Settings</h3>
                    <form>
                        <div class="form-check mb-3 d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" id="emailNotifications" checked>
                            <label class="form-check-label" for="emailNotifications">
                                Email Notifications
                            </label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input me-2" type="checkbox" id="smsNotifications">
                            <label class="form-check-label" for="smsNotifications">
                                SMS Notifications
                            </label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input me-2" type="checkbox" id="pushNotifications">
                            <label class="form-check-label" for="pushNotifications">
                                Push Notifications
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm">Save Preferences</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="breaker31"></div>
{% endblock %}

{% block myscript %}
<script>
    // Additional JavaScript (if needed)
</script>
{% endblock %}