{% extends "base.html" %}
{% load static i18n %}
{% block title %}{% trans "Update Zoom Meeting" %} - {{ block.super }}{% endblock %}

{% block customCSS %}
    <link rel="stylesheet" href="{% static 'css/update_meeting.css' %}">
{% endblock %}

{% block content %}
    <div class="container">
        <div class="header">
            <h1>{% trans "Update Zoom Meeting" %}</h1>
            <p>{% trans "Modify the details of your scheduled meeting" %}</p>
        </div>

        {# Apply KAAT-S theme styles to Django messages #}
        {% if messages %}
            <div class="messages">
                {% for message in messages %}
                    {# Use message tags to map to alert classes: success, danger, info #}
                    <div class="alert alert-{{ message.tags|default:'info' }}">
                        {{ message }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        <div class="card">
            <h2 class="card-title">{% trans "Meeting Information" %}</h2>

            <form method="post" id="updateMeeting" action="{% url 'update_meeting' meeting.slug %}">
                {% csrf_token %}

                <div class="form-row">
                    <label class="form-label" for="{{ form.topic.id_for_label }}">{% trans "Topic" %}</label>
                    {{ form.topic }}
                </div>
                <div class="form-row">
                    <label class="form-label" for="{{ form.start_time.id_for_label }}">{% trans "Start Time" %}</label>
                    {{ form.start_time }}
                </div>
                <div class="form-row">
                    <label class="form-label" for="{{ form.duration.id_for_label }}">{% trans "Duration (minutes)" %}</label>
                    {{ form.duration }}
                </div>

                <div class="actions">
                    <button type="submit" class="btn-base btn-main-action">
                        <svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 1.25rem;">
                            <path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        {% trans "Update Meeting" %}
                    </button>
                    {# Using custom secondary button for 'Cancel' link #}
                    <a href="{% url 'meeting_details' meeting.pk %}" class="btn-base btn-kaats-outline-secondary">
                        {% trans "Cancel" %}
                    </a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}