{% load i18n %}

<div class="modal fade" id="preview-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="preview-title">{% trans "File Preview" %}</h4>
            </div>
            <div class="modal-body">
                <!-- Loading -->
                <div id="preview-loading" class="text-center" style="padding: 30px;">
                    <span class="spinner spinner-lg"></span>
                    <p>{% trans "Loading preview..." %}</p>
                </div>

                <!-- Image Preview -->
                <div id="preview-image" style="display: none; text-align: center;">
                    <img class="img-responsive" id="preview-image-el" src="" alt=""
                         style="max-height: 500px; margin: 0 auto;">
                </div>

                <!-- Text Preview -->
                <div id="preview-text" style="display: none;">
                    <pre id="preview-text-el" style="max-height: 500px; overflow: auto; font-size: 12px; background: #f5f5f5; padding: 15px; border: 1px solid #ddd; border-radius: 4px;"></pre>
                </div>

                <!-- PDF Preview -->
                <div id="preview-pdf" style="display: none;">
                    <iframe id="preview-pdf-el" src="" width="100%" height="500"
                            style="border: 1px solid #ddd;"></iframe>
                </div>

                <!-- Video Preview -->
                <div id="preview-video" style="display: none;">
                    <video id="preview-video-el" controls class="center-block" style="max-width: 100%; max-height: 500px;">
                        <source src="" type="">
                        {% trans "Your browser does not support the video tag." %}
                    </video>
                </div>

                <!-- Audio Preview -->
                <div id="preview-audio" style="display: none;">
                    <audio id="preview-audio-el" controls class="center-block" style="width: 100%;">
                        <source src="" type="">
                        {% trans "Your browser does not support the audio tag." %}
                    </audio>
                </div>

                <!-- Document Preview (DOCX, XLSX) -->
                <div id="preview-document" style="display: none;">
                    <div id="preview-document-el" style="max-height: 500px; overflow: auto; padding: 15px; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-size: 13px;"></div>
                </div>

                <!-- No Preview Available -->
                <div id="preview-none" style="display: none;" class="text-center text-muted">
                    <span class="fa fa-file-o" style="font-size: 64px; display: block; margin-bottom: 15px;"></span>
                    <h4>{% trans "Preview not available for this file type" %}</h4>
                </div>

                <!-- File Info -->
                <hr>
                <div id="preview-info">
                    <dl class="dl-horizontal">
                        <dt>{% trans "Filename" %}</dt>
                        <dd id="preview-info-filename"></dd>
                        <dt>{% trans "Type" %}</dt>
                        <dd id="preview-info-type"></dd>
                        <dt>{% trans "Size" %}</dt>
                        <dd id="preview-info-size"></dd>
                        <dt>{% trans "Uploader" %}</dt>
                        <dd id="preview-info-creator"></dd>
                        <dt>{% trans "Date" %}</dt>
                        <dd id="preview-info-created"></dd>
                    </dl>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" id="preview-download-btn" class="btn btn-primary" download>
                    <span class="fa fa-download"></span> {% trans "Download" %}
                </a>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    {% trans "Close" %}
                </button>
            </div>
        </div>
    </div>
</div>
