<!---app/templates/app_detail.html--->
{% extends "base.html" %}
{% block title %}{{ app.name }}{% endblock %}
{% block content %}
    <div class="container mt-4">
        <div class="card shadow-sm mx-auto" style="max-width: 900px; border: none; border-radius: 10px; animation: fadeIn 0.5s;">
            <div class="card-body p-4">
                <!-- App Icon -->
                {% if app.logo_url %}
                    <img src="{{ app.logo_url }}" alt="{{ app.name }} logo" class="d-block mx-auto mb-3" style="width: 100px; height: 100px; object-fit: contain;" onerror="this.src='https://via.placeholder.com/100?text=No+Logo';">
                {% else %}
                    <img src="https://via.placeholder.com/100?text=No+Logo" alt="No Logo" class="d-block mx-auto mb-3" style="width: 100px; height: 100px; object-fit: contain;">
                {% endif %}

                <!-- Title -->
                <h1 class="text-center mb-2">{{ app.name }}</h1>

                <!-- Organization -->
                <h5 class="text-center text-muted mb-3">
                    <a href="{{ url_for('gallery.gallery', search=app.developer) }}" class="text-decoration-none">{{ app.developer }}</a>
                </h5>

                <!-- Buttons -->
                <div class="d-flex justify-content-center gap-2 mb-4">
                    {% if app.website %}
                        <a href="{{ app.website }}" class="btn btn-primary" aria-label="Visit {{ app.name }} website">Website</a>
                    {% else %}
                        <button class="btn btn-primary" disabled>Website</button>
                    {% endif %}
                    <a href="{{ app.launch_url }}" class="btn btn-outline-primary" aria-label="Try {{ app.name }} with sandbox data">Try App</a>
                </div>

                <!-- Separator -->
                <hr class="my-4">

                <!-- Grid Layout -->
                <div class="row g-4">
                    <!-- Left: Carousel and Selected Fields -->
                    <div class="col-md-6">
                        <!-- Carousel -->
                        {% if app.app_images %}
                            <div id="appImagesCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    {% for img_url in app.app_images.split(',') %}
                                        <div class="carousel-item {% if loop.first %}active{% endif %}">
                                            <img src="{{ img_url }}" class="d-block w-100" alt="App Screenshot {{ loop.index }}" style="max-height: 300px; object-fit: contain;" onerror="this.src='https://via.placeholder.com/300?text=No+Image';">
                                        </div>
                                    {% endfor %}
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#appImagesCarousel" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#appImagesCarousel" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        {% else %}
                            <img src="https://via.placeholder.com/300?text=No+Image" class="d-block w-100 mb-4" alt="No Image" style="max-height: 300px; object-fit: contain;">
                        {% endif %}

                        <!-- Description -->
                        <section class="mb-3">
                            <h5>Description</h5>
                            <hr class="small-hr">
                            <p>{{ app.description or 'No description provided.' }}</p>
                        </section>

                        <!-- Contact Email -->
                        <section class="mb-3">
                            <h5>Contact Email</h5>
                            <hr class="small-hr">
                            <p>{{ app.contact_email or 'Not specified.' }}</p>
                        </section>

                        <!-- Client ID -->
                        <section class="mb-3">
                            <h5>Client ID</h5>
                            <hr class="small-hr">
                            <p>{{ app.client_id or 'Not specified.' }}</p>
                        </section>

                        <!-- Scopes -->
                        <section class="mb-3">
                            <h5>Scopes</h5>
                            <hr class="small-hr">
                            <p>{{ app.scopes or 'Not specified.' }}</p>
                        </section>
                    </div>

                    <!-- Right: Remaining Fields -->
                    <div class="col-md-6">
                        <!-- Website -->
                        <section class="mb-3">
                            <h5>Website</h5>
                            <hr class="small-hr">
                            <p>
                                {% if app.website %}
                                    <a href="{{ app.website }}" class="text-decoration-none">{{ app.website }}</a>
                                {% else %}
                                    Not specified.
                                {% endif %}
                            </p>
                        </section>

                        <!-- Security and Privacy Policy -->
                        {% if app.website %}
                            <section class="mb-3">
                                <h5>Security and Privacy Policy</h5>
                                <hr class="small-hr">
                                <p><a href="{{ app.website }}/security-and-privacy" class="text-decoration-none">{{ app.website }}/security-and-privacy</a></p>
                            </section>
                        {% endif %}

                        <!-- Launch URL -->
                        <section class="mb-3">
                            <h5>Launch URL</h5>
                            <hr class="small-hr">
                            <p><a href="{{ app.launch_url }}" class="text-decoration-none">{{ app.launch_url }}</a></p>
                        </section>

                        <!-- Designed For and Application Type -->
                        <section class="mb-3">
                            <div class="row g-2">
                                <div class="col-6">
                                    <h5>Designed For</h5>
                                    <hr class="small-hr">
                                    <p>
                                        {% if app.designed_for %}
                                            <a href="{{ url_for('gallery.gallery', designed_for=app.designed_for_id) }}" class="text-decoration-none">{{ app.designed_for.name }}</a>
                                        {% else %}
                                            Not specified.
                                        {% endif %}
                                    </p>
                                </div>
                                <div class="col-6">
                                    <h5>Application Type</h5>
                                    <hr class="small-hr">
                                    <p>
                                        {% if app.application_type %}
                                            <a href="{{ url_for('gallery.gallery', application_type=app.application_type_id) }}" class="text-decoration-none">{{ app.application_type.name }}</a>
                                        {% else %}
                                            Not specified.
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </section>

                        <!-- FHIR Compatibility and EHR Support -->
                        <section class="mb-3">
                            <div class="row g-2">
                                <div class="col-6">
                                    <h5>FHIR Compatibility</h5>
                                    <hr class="small-hr">
                                    <p>
                                        {% if app.fhir_compatibility %}
                                            <a href="{{ url_for('gallery.gallery', fhir_support=app.fhir_compatibility_id) }}" class="text-decoration-none">{{ app.fhir_compatibility.name }}</a>
                                        {% else %}
                                            Not specified.
                                        {% endif %}
                                    </p>
                                </div>
                                <div class="col-6">
                                    <h5>EHR Support</h5>
                                    <hr class="small-hr">
                                    <p>
                                        {% if app_ehr_supports %}
                                            {% for ehr in app_ehr_supports %}
                                                <a href="{{ url_for('gallery.gallery', ehr_support=ehr.id) }}" class="text-decoration-none">{{ ehr.name }}</a>{% if not loop.last %}, {% endif %}
                                            {% endfor %}
                                        {% else %}
                                            Not specified.
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </section>

                        <!-- Specialties -->
                        <section class="mb-3">
                            <h5>Specialties</h5>
                            <hr class="small-hr">
                            <p>
                                {% if app_specialties %}
                                    {% for speciality in app_specialties %}
                                        <a href="{{ url_for('gallery.gallery', speciality=speciality.id) }}" class="text-decoration-none">{{ speciality.name }}</a>{% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                {% else %}
                                    Not specified.
                                {% endif %}
                            </p>
                        </section>

                        <!-- OS Support -->
                        <section class="mb-3">
                            <h5>OS Support</h5>
                            <hr class="small-hr">
                            <p>
                                {% if app_os_supports %}
                                    {% for os in app_os_supports %}
                                        <a href="{{ url_for('gallery.gallery', os_support=os.id) }}" class="text-decoration-none">{{ os.name }}</a>{% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                {% else %}
                                    Not specified.
                                {% endif %}
                            </p>
                        </section>

                        <!-- Categories -->
                        <section class="mb-3">
                            <h5>Categories</h5>
                            <hr class="small-hr">
                            <p>
                                {% if app_categories %}
                                    {% for category in app_categories %}
                                        <a href="{{ url_for('gallery.gallery', category=category.id) }}" class="text-decoration-none">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                {% else %}
                                    Not specified.
                                {% endif %}
                            </p>
                        </section>

                        <!-- Licensing & Pricing -->
                        <section class="mb-3">
                            <h5>Licensing & Pricing</h5>
                            <hr class="small-hr">
                            <p>
                                {% if app.licensing_pricing %}
                                    <a href="{{ url_for('gallery.gallery', pricing_license=app.licensing_pricing_id) }}" class="text-decoration-none">{{ app.licensing_pricing.name }}</a>
                                    <!-- Placeholder price, configurable later -->
                                    <span class="text-muted">($99/user/month)</span>
                                {% else %}
                                    Not specified.
                                {% endif %}
                            </p>
                        </section>
                    </div>
                </div>

                <!-- Edit/Delete Buttons (for app owners) -->
                {% if current_user.is_authenticated and current_user.id == app.user_id %}
                    <div class="d-flex justify-content-center gap-2 mt-4">
                        <a href="{{ url_for('gallery.edit_app', app_id=app.id) }}" class="btn btn-primary" aria-label="Edit {{ app.name }}">Edit App</a>
                        <form action="{{ url_for('gallery.delete_app', app_id=app.id) }}" method="POST">
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this app?');" aria-label="Delete {{ app.name }}">Delete App</button>
                        </form>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Report Link -->
        <div class="mt-3 d-flex justify-content-center">
            <a href="mailto:support@smartflare.com?subject=Report Listing: {{ app.name }}" class="text-danger text-decoration-none" aria-label="Report issue with {{ app.name }} listing">
                <i class="fas fa-exclamation-circle me-1"></i> Report Listing
            </a>
        </div>
    </div>

    <style>
        .card {
            background-color: #ffffff;
        }
        html[data-theme="dark"] .card {
            background-color: #343a40;
            color: #f8f9fa;
        }
        html[data-theme="dark"] .text-muted {
            color: #adb5bd !important;
        }
        html[data-theme="dark"] hr {
            border-top: 1px solid #495057;
        }
        .small-hr {
            border-top: 1px solid #e0e0e0;
            margin: 0.5rem 0;
        }
        html[data-theme="dark"] .small-hr {
            border-top: 1px solid #495057;
        }
        .carousel-control-prev,
        .carousel-control-next {
            width: 10%;
            background: rgba(0, 0, 0, 0.3);
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        html[data-theme="dark"] .btn-primary {
            background-color: #4dabf7;
            border-color: #4dabf7;
        }
        .btn-outline-primary {
            color: #007bff;
            border-color: #007bff;
        }
        html[data-theme="dark"] .btn-outline-primary {
            color: #4dabf7;
            border-color: #4dabf7;
        }
        .btn-outline-primary:hover {
            background-color: #007bff;
            color: white;
        }
        html[data-theme="dark"] .btn-outline-primary:hover {
            background-color: #4dabf7;
            color: white;
        }
        h5 {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        p {
            margin-bottom: 0.5rem;
        }
        .carousel + section {
            margin-top: 0;
        }
        @media (max-width: 576px) {
            .card-body {
                padding: 1.5rem;
            }
            .carousel {
                margin-bottom: 1rem;
            }
            h1 {
                font-size: 1.5rem;
            }
            h5 {
                font-size: 0.95rem;
            }
            p {
                font-size: 0.85rem;
            }
            .row.g-2 > .col-6 {
                width: 100%;
            }
        }
    </style>
{% endblock %}
