{% extends 'atlas/base.html' %}

{% block content %}
    {% if resource %}
        {% include "atlas/resource_link_header.html" %}
    {% endif %}

    <div class="container mt-3">
        <div class="row">
            <div class="col-lg-8">
                <div class="card mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ resource.name }}</h5>
                        <small class="text-muted">by {{ resource.get_authors|default:"Unknown" }}</small>
                    </div>
                    <div class="card-body">
                        {# Media preview: image or video autosized, clickable to open full-size modal #}
                        {% if resource.file or resource.url %}
                            <div class="resource-media-preview mb-3 text-center">
                                {% comment %}Prefer local file if present, otherwise try URL{% endcomment %}
                                {% if resource.file %}
                                    {% with src=resource.file.url %}
                                        {% include 'atlas/partials/resource_media.html' with src=src resource=resource %}
                                    {% endwith %}
                                {% else %}
                                    {% with src=resource.url %}
                                        {% include 'atlas/partials/resource_media.html' with src=src resource=resource %}
                                    {% endwith %}
                                {% endif %}
                            </div>
                        {% endif %}

                        {% if resource.description %}
                            <p class="card-text">{{ resource.description|linebreaksbr }}</p>
                        {% endif %}

                        <dl class="row">
                            {% if resource.url %}
                                <dt class="col-sm-3">URL</dt>
                                <dd class="col-sm-9"><a href="{{ resource.url }}" target="_blank" rel="noopener">{{ resource.url }}</a></dd>
                            {% endif %}

                            {% if resource.file %}
                                <dt class="col-sm-3">File</dt>
                                <dd class="col-sm-9">
                                    <a href="{{ resource.file.url }}" target="_blank" rel="noopener">Download</a>
                                    {% if resource.file.name %}
                                        <small class="text-muted ms-2">({{ resource.file.name|truncatechars:40 }})</small>
                                    {% endif %}
                                </dd>
                            {% endif %}

                            <dt class="col-sm-3">Source</dt>
                            <dd class="col-sm-9">{{ resource.get_display }}</dd>
                        </dl>

                        <div class="mt-3">
                            <a class="btn btn-sm btn-outline-primary" href="{% url 'atlas:resource_view' resource.pk %}" target="_blank">Open resource page</a>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">Used in cases</h6>
                    </div>
                    <div class="card-body">
                        {% if resource.case_set.all %}
                            <ul class="list-unstyled mb-0">
                                {% for case in resource.case_set.all %}
                                    <li><a href="{% url 'atlas:case_detail' case.id %}">{{ case.title }}</a></li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <p class="mb-0 text-muted">This resource is not used in any cases.</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <aside class="card mb-3">
                    <div class="card-body">
                        <h6 class="card-title">Details</h6>
                        <ul class="list-unstyled small mb-0">
                            <li><strong>Author:</strong> {{ resource.get_authors|default:"-" }}</li>
                            <li><strong>Sites:</strong>
                                {% if resource.sites.all %}
                                    {% for s in resource.sites.all %}
                                        <div><a href="{% url 'generic:site_detail' s.pk %}">{{ s.name }}</a></div>
                                    {% endfor %}
                                {% else %}
                                    -
                                {% endif %}
                            </li>
                            <li class="mt-2"><strong>Subspecialty:</strong>
                                {% if resource.subspecialty.all %}
                                    {% for sp in resource.subspecialty.all %}
                                        <div>{{ sp.name }}</div>
                                    {% endfor %}
                                {% else %}
                                    -
                                {% endif %}
                            </li>
                            <li class="mt-2"><strong>Created:</strong> {{ resource.created_date|date:"Y-m-d H:i" }}</li>
                            <li><strong>Updated:</strong> {{ resource.modified_date|date:"Y-m-d H:i" }}</li>
                        </ul>
                    </div>
                </aside>

                <div class="d-grid gap-2">
                    <a class="btn btn-primary" href="{% url 'atlas:resource_update' resource.pk %}">Edit</a>
                    <a class="btn btn-outline-danger" href="{% url 'atlas:resource_delete' resource.pk %}">Delete</a>
                    <a class="btn btn-outline-secondary" href="{% url 'atlas:resource_view' %}">Back to resources</a>
                </div>
            </div>
        </div>
    </div>

{% endblock %}