{% 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">
            {% 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 %}
            <h1 class="text-center mb-2">{{ app.name }}</h1>
            <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>
            <div class="d-flex justify-content-center gap-2 mb-4">
                {% if app.website %}
                    <a href="{{ app.website }}" class="btn btn-primary" target="_blank" rel="noopener noreferrer" aria-label="Visit {{ app.name }} website">Website</a>
                {% else %}
                    <button class="btn btn-primary" disabled>Website</button>
                {% endif %}
                {% if app.launch_url %}
                    <a href="{{ app.launch_url }}" class="btn btn-outline-primary" target="_blank" rel="noopener noreferrer" aria-label="Try {{ app.name }} with sandbox data">Try App</a>
                {% endif %}
            </div>
            <hr class="my-4">
            <div class="row g-4">
                <div class="col-md-6">
                    {% 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 %}
                    <section class="mb-3">
                        <h5>Description</h5>
                        <hr class="small-hr">
                        <p>{{ app.description or 'No description provided.' }}</p>
                    </section>
                    <section class="mb-3">
                        <h5>Contact Email</h5>
                        <hr class="small-hr">
                        <p>{{ app.contact_email or 'Not specified.' }}</p>
                    </section>
                </div>
                <div class="col-md-6">
                    <section class="mb-3">
                        <h5>Website</h5>
                        <hr class="small-hr">
                        <p>
                            {% if app.website %}
                                <a href="{{ app.website }}" class="text-decoration-none" target="_blank" rel="noopener noreferrer">{{ app.website }}</a>
                            {% else %}
                                Not specified.
                            {% endif %}
                        </p>
                    </section>
                    {% 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" target="_blank" rel="noopener noreferrer">{{ app.website }}/security-and-privacy</a></p>
                        </section>
                    {% endif %}
                    <section class="mb-3">
                        <h5>Launch URL</h5>
                        <hr class="small-hr">
                        <p><a href="{{ app.launch_url }}" class="text-decoration-none" target="_blank" rel="noopener noreferrer">{{ app.launch_url }}</a></p>
                    </section>
                    <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>FHIR Compatibility</h5>
                                <.ttf 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>
                    </section>
                    <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>
                    <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>
                    <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>
                            {% else %}
                                Not specified.
                            {% endif %}
                        </p>
                    </section>
                </div>
            </div>
            {% if current_user.is_authenticated and (current_user.is_admin or 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>
    <div class="mt-3 d-flex justify-content-center">
        <a href="mailto:support@fhirpad.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 {
 THESE BUTTONS ARE CURRENTLY DISABLED ON THE DETAIL PAGE
        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 %}