{% extends "base.html" %}

{% if comic %}
{% block meta_description %}{{ comic.alt_text }}{% if comic.author_note %} - {{ comic.author_note }}{% endif %}{% endblock %}

{% block og_image %}{{ site_url }}/static/images/thumbs/{{ comic.filename }}{% endblock %}
{% endif %}

{% block content %}
<!-- ARIA live region for screen reader announcements -->
<div aria-live="polite" aria-atomic="true" class="sr-only" id="comic-announcer"></div>

<div class="comic-container" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}">
    <div class="comic-header">
        <h1>{{ comic.title if comic.title else '#' ~ comic.number }}</h1>
        <p class="comic-date">{{ comic.date }}</p>
    </div>

    <div class="comic-image" id="comic-image-focus" tabindex="-1">
        {% if comic.mobile_filename %}
        <picture>
            <source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
            <img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
                 alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
                 title="{{ comic.alt_text }}">
        </picture>
        {% else %}
        <img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
             alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
             title="{{ comic.alt_text }}">
        {% endif %}
    </div>

    <div class="comic-navigation">
        <div class="nav-buttons">
            {% if use_comic_nav_icons %}
                {# Icon-based navigation #}
                {% if comic.number > 1 %}
                    <a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">
                        <img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="">
                    </a>
                    <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn-icon-nav" aria-label="Previous">
                        <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="">
                    </a>
                {% else %}
                    <span class="btn-icon-nav btn-icon-disabled" aria-label="First" aria-disabled="true">
                        <img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="">
                    </span>
                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Previous" aria-disabled="true">
                        <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="">
                    </span>
                {% endif %}

                <span class="comic-date-display">{{ comic.formatted_date }}</span>

                {% if comic.number < total_comics %}
                    <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn-icon-nav" aria-label="Next">
                        <img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="">
                    </a>
                    <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn-icon-nav" aria-label="Latest">
                        <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="">
                    </a>
                {% else %}
                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Next" aria-disabled="true">
                        <img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="">
                    </span>
                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Latest" aria-disabled="true">
                        <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="">
                    </span>
                {% endif %}
            {% else %}
                {# Text-based navigation #}
                {% if comic.number > 1 %}
                    <a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
                    <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
                {% else %}
                    <span class="btn btn-nav btn-disabled" aria-disabled="true">First</span>
                    <span class="btn btn-nav btn-disabled" aria-disabled="true">Previous</span>
                {% endif %}

                <span class="comic-date-display">{{ comic.formatted_date }}</span>

                {% if comic.number < total_comics %}
                    <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
                    <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
                {% else %}
                    <span class="btn btn-nav btn-disabled" aria-disabled="true">Next</span>
                    <span class="btn btn-nav btn-disabled" aria-disabled="true">Latest</span>
                {% endif %}
            {% endif %}
        </div>
    </div>

    {% if embed_enabled or permalink_enabled %}
    <div class="comic-share-section">
        {% if permalink_enabled %}
        <button class="btn-permalink{% if use_share_icons %} btn-with-icon{% endif %}" id="permalink-button" data-comic-number="{{ comic.number }}" aria-label="Copy permalink to this comic">
            {% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/link.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Copy Permalink
        </button>
        {% endif %}
        {% if embed_enabled %}
        <button class="btn-embed{% if use_share_icons %} btn-with-icon{% endif %}" id="embed-button" data-comic-number="{{ comic.number }}" aria-label="Get embed code for this comic">
            {% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/embed.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Share/Embed
        </button>
        {% endif %}
    </div>
    {% endif %}

    {% if comic.author_note %}
    <div class="comic-transcript">
        <h3>Author Note</h3>
        {% if comic.author_note_is_html == True %}
        <div>{{ comic.author_note|safe }}</div>
        {% else %}
        <p>{{ comic.author_note }}</p>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}