{% extends "base.html" %}
{% load static i18n %}

{% block title %}{% trans "Meeting Details" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h1>
            <svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0 8.268-2.943-9.542-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            {{ meeting.topic }}
        </h1>
        <span class="status-badge status-{{ meeting.status }}">
            {{ meeting.status|title }}
        </span>
        <a href="{% url 'list_meetings' %}" class="btn btn-secondary">{% trans "Back to Meetings" %}</a>
    </div>

    <div class="card">
        <h2>{% trans "Meeting Information" %}</h2>
        <div class="detail-row">
            <div class="detail-label">{% trans "Meeting ID" %}:</div>
            <div class="detail-value">{{ meeting.meeting_id }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Start Time" %}:</div>
            <div class="detail-value">{{ meeting.start_time|date:"M d, Y H:i" }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Duration" %}:</div>
            <div class="detail-value">{{ meeting.duration }} minutes</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Host Email" %}:</div>
            <div class="detail-value">{{ meeting.host_email }}</div>
        </div>
    </div>

    {% if meeting.join_url %}
        <div class="card">
            <h2>{% trans "Join Information" %}</h2>
            <a href="{{ meeting.join_url }}" class="btn btn-primary" target="_blank">{% trans "Join Meeting" %}</a>
            {% if meeting.password %}
                <div class="detail-row">
                    <div class="detail-label">{% trans "Password" %}:</div>
                    <div class="detail-value">{{ meeting.password }}</div>
                </div>
            {% endif %}
        </div>
    {% endif %}

    <div class="card">
        <h2>{% trans "Settings" %}</h2>
        <div class="detail-row">
            <div class="detail-label">{% trans "Host Video" %}:</div>
            <div class="detail-value">{{ meeting.host_video|yesno:"Yes,No" }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Participant Video" %}:</div>
            <div class="detail-value">{{ meeting.participant_video|yesno:"Yes,No" }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Join Before Host" %}:</div>
            <div class="detail-value">{{ meeting.join_before_host|yesno:"Yes,No" }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Mute Upon Entry" %}:</div>
            <div class="detail-value">{{ meeting.mute_upon_entry|yesno:"Yes,No" }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Waiting Room" %}:</div>
            <div class="detail-value">{{ meeting.waiting_room|yesno:"Yes,No" }}</div>
        </div>
    </div>

    <div class="actions">
        {% if meeting.zoom_gateway_response %}
            <a href="#" class="btn btn-secondary" onclick="toggleGateway()">{% trans "View API Response" %}</a>
        {% endif %}
        <a href="{% url 'update_meeting' meeting.pk %}" class="btn btn-primary">{% trans "Update Meeting" %}</a>
        <form method="post" action="{% url 'delete_meeting' meeting.pk %}" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger" onclick="return confirm('{% trans "Are you sure?" %}')">{% trans "Delete Meeting" %}</button>
        </form>
    </div>

    {% if meeting.zoom_gateway_response %}
        <div id="gateway-response" style="display: none; margin-top: 2rem;">
            <div class="card">
                <h3>{% trans "Zoom API Response" %}</h3>
                <pre>{{ meeting.zoom_gateway_response|safe }}</pre>
            </div>
        </div>
        <script>
            function toggleGateway() {
                document.getElementById('gateway-response').style.display = document.getElementById('gateway-response').style.display === 'none' ? 'block' : 'none';
            }
        </script>
    {% endif %}