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

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

{% block customCSS %}
<style>
    /* UI Variables for the KAAT-S Theme (Consistent with list_meetings.html) */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
        --kaauh-gray-light: #f8f9fa;
    }

    /* Main Container and Card Styling */
    .container {
        padding: 2rem 1rem;
    }
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        background-color: white;
        margin-bottom: 2rem;
    }
    .card:not(.no-hover):hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .card.no-hover:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }


    /* Header Card Styling */
    .card-header {
        background-color: var(--kaauh-gray-light);
        border-bottom: 1px solid var(--kaauh-border);
        padding: 1.5rem;
        border-radius: 0.75rem 0.75rem 0 0; /* Match top border radius of card */
    }
    .card-header h1 {
        color: var(--kaauh-teal-dark);
        font-weight: 700;
        margin: 0 0 0.5rem 0; /* Space below title */
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .card-header .heroicon {
        width: 1.75rem;
        height: 1.75rem;
        color: var(--kaauh-teal);
    }
    .card-header .btn-secondary {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .card-header .btn-secondary:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        color: white;
    }

    /* Status Badge Styling (from list_meetings.html) */
    .status-badge {
        font-size: 0.8rem;
        padding: 0.4em 0.8em;
        border-radius: 0.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
    }
    .bg-waiting { background-color: #ffc107 !important; color: var(--kaauh-primary-text) !important;}
    .bg-started { background-color: var(--kaauh-teal) !important; color: white !important;}
    .bg-ended { background-color: #dc3545 !important; color: white !important;}


    /* Detail Row Styling */
    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid var(--kaauh-border);
    }
    .detail-row:last-child {
        border-bottom: none;
    }
    .detail-label {
        font-weight: 600;
        color: var(--kaauh-teal-dark);
        min-width: 40%; /* Ensure labels align */
    }
    .detail-value {
        text-align: right;
        color: var(--kaauh-primary-text);
        word-wrap: break-word; /* Long URLs or text wrap */
        max-width: 60%; /* Ensure values align */
    }

    /* Card Title Styling within content cards */
    .card h2 {
        color: var(--kaauh-teal-dark);
        font-weight: 600;
        padding: 1.5rem 1.5rem 0.75rem;
        margin: 0;
        border-bottom: 1px solid var(--kaauh-border);
    }

    /* Join URL Styling */
    .join-url-display {
        background-color: #f8f9fa;
        border: 1px solid var(--kaauh-border);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin-top: 0.75rem;
        word-break: break-all; /* Force long URLs to break */
    }

    /* Actions Styling */
    .actions {
        padding: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem; /* Space between buttons */
        justify-content: flex-start; /* Align buttons to the left */
    }
    .btn-primary {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .btn-primary:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        color: white;
    }
    .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white;
    }
    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
        color: white;
    }

    /* API Response Styling */
    #gateway-response {
        margin-top: 2rem;
    }
    #gateway-response .card {
        border-left: 4px solid var(--kaauh-teal); /* Indicate it's different content */
    }
    #gateway-response pre {
        background-color: #f8f9fa;
        border: 1px solid var(--kaauh-border);
        border-radius: 0.5rem;
        padding: 1rem;
        margin-top: 0.75rem;
        overflow-x: auto; /* For long JSON lines */
        font-size: 0.9rem;
        color: var(--kaauh-primary-text);
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="card no-hover">
        <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 bg-{{ meeting.status }}">
                {{ meeting.status|title }}
            </span>
            <a href="{% url 'list_meetings' %}" class="btn btn-secondary mt-3">{% trans "Back to Meetings" %}</a>
        </div>
    </div>

    <div class="card no-hover">
        <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 "Topic" %}:</div>
            <div class="detail-value">{{ meeting.topic }}</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 }} {% trans "minutes" %}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Timezone" %}:</div>
            <div class="detail-value">{{ meeting.timezone|default:"UTC" }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">{% trans "Host Email" %}:</div>
            <div class="detail-value">{{ meeting.host_email|default:"N/A" }}</div>
        </div>
    </div>

    {% if meeting.join_url %}
        <div class="card no-hover">
            <h2>{% trans "Join Information" %}</h2>
            <a href="{{ meeting.join_url }}" class="btn btn-primary" target="_blank">{% trans "Join Meeting" %}</a>
            {% comment %} <div class="join-url-display">
                <strong>{% trans "Join URL:" %}</strong> {{ meeting.join_url }}
            </div> {% endcomment %}
            {% if meeting.password %}
                <div class="detail-row">
                    <div class="detail-label">{% trans "Password" %}: {{ meeting.password }}</div>
                    <div class="detail-value"></div>
                </div>
            {% endif %}
        </div>
    {% endif %}

    <div class="card no-hover">
        <h2>{% trans "Settings" %}</h2>
        <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="card no-hover">
        <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.slug %}" 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>
    </div>

    {% if meeting.zoom_gateway_response %}
        {% comment %} <div id="gateway-response">
            <div class="card">
                <h3>{% trans "Zoom API Response" %}</h3>
                <pre>{{ meeting.zoom_gateway_response|safe }}</pre>
            </div>
        </div> {% endcomment %}
        <script>
            function toggleGateway() {
                const element = document.getElementById('gateway-response');
                if (element.style.display === 'none' || !element.style.display) {
                    element.style.display = 'block';
                } else {
                    element.style.display = 'none';
                }
            }
        </script>
    {% endif %}
</div>
{% endblock %}