{% extends "base.html" %}
{% load i18n %}
{% block title %}
    {% trans "Time Zone Preferences" %}
{% endblock title %}
{% block content %}
    <div class="container my-4">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-7">
                {% trans "Time Zone Preferences" as page_title %}
                {% include "yksa/ui/_page_title.html" with title=page_title %}
                <p class="text-body-secondary mt-3">
                    {% trans "All timestamps are stored in UTC. You can choose how event and status times are displayed in the interface." %}
                </p>

                <div class="card">
                    <div class="card-body">
                        <form method="post" novalidate>
                            {% csrf_token %}
                            <input type="hidden" name="next" value="{{ next_url }}">
                            <div class="mb-3">
                                <label for="id_timezone" class="form-label">{% trans "Display time zone" %}</label>
                                <select class="form-select" id="id_timezone" name="timezone" required>
                                    {% for tz_name in timezone_names %}
                                        <option value="{{ tz_name }}" {% if tz_name == selected_timezone %}selected{% endif %}>{{ tz_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">{% trans "Save time zone" %}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}