{% load filer_admin_tags i18n admin_urls %}

<section class="flex max-md:flex-wrap w-full lg:gap-24 items-start">
    <div class="card min-w-0 w-full">
        {% file_icon original detail=True %}
        {% if original.file.exists %}
            <div class="mt-24 flex flex-wrap gap-8">
                <a href="{{ original.url }}" target="_blank" class="btn" download="{{ original.original_filename }}" rel="noopener noreferrer">
                    <span class="icon fa fa-download filer-icon filer-icon-download"></span>&nbsp;
                    <span>{% translate "Download" %}</span>
                </a>
                {% if expand_image_url %}
                    <a href="{{ expand_image_url }}" target="_blank" rel="noopener noreferrer" class="btn">
                        <span class="icon filer-icon filer-icon-expand fa fa-expand"></span>&nbsp;
                        <span>{% translate "Expand" %}</span>&nbsp;
                    </a>
                {% endif %}
                {% if has_delete_permission %}
                    {% with del_name=request.current_app|add:":"|add:opts.app_label|add:"_"|add:opts.model_name|add:"_delete" %}
                    <a href="{% url del_name object_id|admin_urlquote %}" class="btn btn-destructive">
                        <svg class="w-20 h-20 md:mr-8">
                            <use xlink:href="#Delete"></use>
                        </svg>
                        <span>{% translate "Delete" %}</span>
                    </a>
                    {% endwith %}
                {% endif %}
            </div>
        {% else %}
            <p class="mt-16 text-14 text-negative-800">{% translate "File is missing" %}</p>
        {% endif %}
    </div>
    {% if original.file_type or original.modified_at or original.uploaded_at or original.width or original.height or original.size or original.owner %}
        <ul class="lg:flex-shrink-0 w-full lg:w-370 empty:hidden card p-24 detail-structure-right flex flex-col gap-y-6 text-14">
            {% if original.file_type %}
                <li class="flex gap-8">
                    <p class="font-bold text-dark-900 shrink-0">{% translate "Type" %}</p>
                    <p class="text-dark-700">{{ original.extension|upper }} {{ original.file_type }} ({{ original.mime_type }})</p>
                </li>
            {% endif %}
            {% if original.width or original.height %}
                <li class="flex gap-8">
                    <p class="font-bold text-dark-900 shrink-0">{% translate "Size" %}</p>
                    <p class="text-dark-700">{{ original.width|floatformat }}×{{ original.height|floatformat }} px</p>
                </li>
            {% endif %}
            {% if original.size %}
                <li class="flex gap-8">
                    <p class="font-bold text-dark-900 shrink-0">{% translate "File-size" %}</p>
                    <p class="text-dark-700">{{ original.size|filesizeformat }}</p>
                </li>
            {% endif %}
            {% if original.modified_at %}
                <li class="flex gap-8">
                    <p class="font-bold text-dark-900 shrink-0">{% translate "Modified" %}</p>
                    <p class="text-dark-700">{{ original.modified_at }}</p>
                </li>
            {% endif %}
            {% if original.uploaded_at %}
                <li class="flex gap-8">
                    <p class="font-bold text-dark-900 shrink-0">{% translate "Created" %}</p>
                    <p class="text-dark-700">{{ original.uploaded_at }}</p>
                </li>
            {% endif %}
            {% if original.owner %}
                <li class="flex gap-8">
                    <p class="font-bold text-dark-900 shrink-0">{% translate "Owner" %}</p>
                    <p class="text-dark-700">{{ original.owner }}</p>
                </li>
            {% endif %}
        </ul>
    {% endif %}
</section>