{% load static %}

{% if source_url %}
<div class="dlux-pdf-viewer"
     data-pdf-url="{{ source_url }}"
     data-file-name="{{ file_name }}"
     data-worker-url="{% static 'dlux/pdf/vendor/pdf.worker.min.js' %}">
    <div class="dlux-pdf-toolbar no-print">
        <div class="dlux-pdf-toolbar-group">
            <button type="button" class="btn btn-outline-secondary btn-sm" data-pdf-prev title="{{ DLUX_STRINGS.pdf_previous_page_label|default:'Previous Page' }}">
                <i class="bi bi-chevron-right"></i>
            </button>
            <span class="dlux-pdf-page-status">
                <span data-pdf-page>1</span>/<span data-pdf-pages>1</span>
            </span>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-pdf-next title="{{ DLUX_STRINGS.pdf_next_page_label|default:'Next Page' }}">
                <i class="bi bi-chevron-left"></i>
            </button>
        </div>
        <div class="dlux-pdf-toolbar-group">
            <button type="button" class="btn btn-outline-secondary btn-sm" data-pdf-zoom-out title="{{ DLUX_STRINGS.pdf_zoom_out_label|default:'Zoom Out' }}">
                <i class="bi bi-zoom-out"></i>
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-pdf-zoom-in title="{{ DLUX_STRINGS.pdf_zoom_in_label|default:'Zoom In' }}">
                <i class="bi bi-zoom-in"></i>
            </button>
        </div>
        <div class="dlux-pdf-toolbar-group ms-auto">
            <a class="btn btn-outline-primary btn-sm" href="{{ download_url }}" title="{{ DLUX_STRINGS.pdf_download_pdf_label|default:'Download PDF' }}">
                <i class="bi bi-download"></i>
            </a>
            <button type="button" class="btn btn-outline-primary btn-sm" data-pdf-print title="{{ DLUX_STRINGS.pdf_print_label|default:'Print' }}">
                <i class="bi bi-printer"></i>
            </button>
            {% if can_edit and pdf_features.editing_enabled %}
            <a class="btn btn-outline-warning btn-sm"
               href="{{ edit_url }}"
               data-dynamic-modal="{{ edit_url }}"
               data-modal-title="{{ DLUX_STRINGS.pdf_edit_pdf_label|default:'Edit PDF' }}"
               title="{{ DLUX_STRINGS.pdf_edit_pdf_label|default:'Edit PDF' }}">
                <i class="bi bi-file-earmark-pdf"></i>
            </a>
            {% endif %}
            {% if pdf_features.history_enabled %}
            <a class="btn btn-outline-secondary btn-sm"
               href="{{ history_url }}"
               data-dynamic-modal="{{ history_url }}"
               data-modal-title="{{ DLUX_STRINGS.pdf_version_history_label|default:'Version History' }}"
               title="{{ DLUX_STRINGS.pdf_version_history_label|default:'Version History' }}">
                <i class="bi bi-clock-history"></i>
            </a>
            {% endif %}
            <button type="button" class="btn btn-outline-dark btn-sm" data-pdf-fullscreen title="{{ DLUX_STRINGS.pdf_fullscreen_label|default:'Fullscreen' }}">
                <i class="bi bi-arrows-fullscreen"></i>
            </button>
        </div>
    </div>
    <div class="dlux-pdf-stage">
        <canvas data-pdf-canvas></canvas>
        <iframe data-pdf-fallback src="{{ source_url }}#toolbar=0&navpanes=0" title="{{ DLUX_STRINGS.pdf_preview_label|default:'PDF Preview' }}"></iframe>
    </div>
</div>
{% else %}
<div class="dlux-pdf-empty d-flex flex-column gap-3 justify-content-center align-items-center">
    <p class="text-muted mb-0">{{ DLUX_STRINGS.pdf_no_pdf_available|default:"No PDF file is available." }}</p>
    {% if can_edit and pdf_features.editing_enabled %}<a class="btn btn-outline-primary" href="{{ edit_url }}" data-dynamic-modal="{{ edit_url }}">{{ DLUX_STRINGS.pdf_edit_pdf_label|default:'Edit PDF' }}</a>{% endif %}
    {% if pdf_features.history_enabled %}<a class="btn btn-outline-secondary" href="{{ history_url }}" data-dynamic-modal="{{ history_url }}">{{ DLUX_STRINGS.pdf_version_history_label|default:'Version History' }}</a>{% endif %}
</div>
{% endif %}