{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="settings-container">
    <div class="settings-header">
        <h1>⚙️ Settings</h1>
        <p>Manage your account settings and preferences.</p>
    </div>

    <div class="settings-grid">
        <div class="settings-card">
            <h3>🎨 Appearance</h3>
            <p>Customize how the app looks on your device.</p>
            <div class="settings-action">
                <button type="button" class="mode-toggle btn btn-primary">Toggle Theme</button>
            </div>
        </div>

        <div class="settings-card">
            <h3>🌐 Language</h3>
            <p>Select your preferred language.</p>
            <div class="settings-action">
                <form action="{% url 'set_language_preference' %}" method="post" class="settings-language-form">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.get_full_path }}">
                    <select name="language" onchange="this.form.submit()" class="form-select">
                        {% for opt in language_options %}
                        <option value="{{ opt.code }}" {% if site_language == opt.code %}selected{% endif %}>{{ opt.label }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>

        <div class="settings-card">
            <h3>📍 Delivery Location</h3>
            <p>Save your default delivery location for faster checkout.</p>
            <div class="settings-action">
                <form method="post" class="settings-location-form">
                    {% csrf_token %}
                    <input type="text" name="delivery_location" value="{{ delivery_location }}" placeholder="Enter city or address" class="form-control">
                    <button type="submit" class="btn btn-primary">Save location</button>
                </form>
            </div>
        </div>

        <div class="settings-card">
            <h3>👤 Account</h3>
            <p>Update your profile information and manage your account.</p>
            <div class="settings-action">
                {% if user.is_authenticated %}
                <a href="{% url 'profile' %}" class="btn btn-secondary">Go to Profile</a>
                {% else %}
                <a href="{% url 'login' %}" class="btn btn-secondary">Login to manage account</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}