{# Properties page for a single ir.attachment.

   Renders in two modes:
   * Full page (default) — wraps in the standard sidebar layout.
   * Panel fragment (is_panel=True) — used by the Library's right-side
     slide-over. Skips the layout, omits the page heading, and lays the
     preview + metadata vertically so it fits a narrow column.

   Context variables (set by the route handler):
     att              ir.attachment record (already permission-checked)
     mimetype         lowercased att.mimetype
     is_image         bool — image MIME → render <img> preview
     extension        derived from datas_fname / name (lowercase, no dot)
     dimensions       (w, h) tuple or None — only computed for images
     owner_url        /web/records/.../<id> link or "" when no owner
     folder_chain     [{id, name}, …] root → leaf, or []
     panel_only       bool — skip the page chrome
#}
{% if not panel_only %}{% extends "layouts/main.html" %}{% endif %}

{% if not panel_only %}
{% block title %}{{ att.name }} — {% if brand is defined %}{{ brand.app_name }}{% else %}pyvelm{% endif %}{% endblock %}
{% block page_title %}{{ att.name }}{% endblock %}
{% block page_actions %}
<a href="/api/attachment/{{ att.id }}/download"
   class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white
          rounded-md bg-fg-brand hover:opacity-90 transition">
    Download
</a>
{% if owner_url %}
<a href="{{ owner_url }}"
   class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium
          border border-default text-body rounded-md hover:bg-neutral-secondary transition">
    Open linked record
</a>
{% endif %}
<button type="button"
        onclick="(async () => {
            const ok = await (window.pvConfirm
                ? window.pvConfirm('Delete this file?', { title:'Delete file', variant:'danger', confirmLabel:'Delete' })
                : Promise.resolve(confirm('Delete this file?')));
            if (!ok) return;
            const r = await fetch('/api/attachment/{{ att.id }}', {
                method:'DELETE',
                credentials:'same-origin',
                headers: { 'X-CSRF-Token': window.pvCsrf ? window.pvCsrf() : '' },
            });
            if (r.ok || r.status === 204) {
                window.location = '/web/files/library';
            } else {
                window.pvAlert && window.pvAlert('Delete failed.', { variant:'danger' });
            }
        })()"
        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium
               border border-fg-danger/30 text-fg-danger rounded-md
               hover:bg-danger-soft transition">
    Delete
</button>
{% endblock %}
{% endif %}

{% if panel_only %}
{% set body_class = "space-y-3" %}
{% else %}
{% set body_class = "grid gap-6 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_28rem]" %}
{% endif %}

{% set body %}
<div class="{{ body_class }}">
    {# ─── Preview ─── #}
    <div class="{% if panel_only %}aspect-[4/3]{% else %}aspect-[4/3] lg:aspect-auto lg:min-h-[24rem]{% endif %}
                rounded-lg border border-default bg-neutral-secondary
                flex items-center justify-center overflow-hidden">
        {% if is_image %}
        <img src="/api/attachment/{{ att.id }}/download"
             alt="{{ att.name }}"
             loading="lazy"
             class="w-full h-full object-contain bg-checker"
             onerror="this.style.display='none'">
        {% else %}
        <div class="flex flex-col items-center text-body-subtle gap-2">
            <svg class="w-14 h-14" fill="none" stroke="currentColor"
                 viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
            </svg>
            <span class="text-xs uppercase tracking-wider">
                {{ extension or 'file' }}
            </span>
        </div>
        {% endif %}
    </div>

    {# ─── Metadata + actions ─── #}
    <div class="space-y-4">
        {% if panel_only %}
        <h2 class="text-lg font-semibold text-heading truncate" title="{{ att.name }}">
            {{ att.name }}
        </h2>
        {% endif %}

        {% if folder_chain %}
        <nav class="text-xs text-body-subtle flex items-center flex-wrap gap-1">
            <a href="/web/files/library" class="hover:text-fg-brand hover:underline">Library</a>
            {% for crumb in folder_chain %}
            <span>›</span>
            <a href="/web/files/library?folder_id={{ crumb.id }}"
               class="hover:text-fg-brand hover:underline">{{ crumb.name }}</a>
            {% endfor %}
        </nav>
        {% endif %}

        <dl class="grid grid-cols-[8rem_minmax(0,1fr)] gap-y-2 text-sm">
            <dt class="text-body-subtle">Name</dt>
            <dd class="text-heading font-medium break-words">{{ att.name }}</dd>

            <dt class="text-body-subtle">Filename</dt>
            <dd class="text-body break-words">{{ att.datas_fname or '—' }}</dd>

            <dt class="text-body-subtle">Type</dt>
            <dd class="text-body break-words">
                <code class="text-xs">{{ mimetype or 'application/octet-stream' }}</code>
            </dd>

            <dt class="text-body-subtle">Size</dt>
            <dd class="text-body">{{ att.file_size | human_size }}</dd>

            {% if is_image and dimensions %}
            <dt class="text-body-subtle">Dimensions</dt>
            <dd class="text-body">{{ dimensions[0] }} × {{ dimensions[1] }} px</dd>
            {% elif is_image %}
            <dt class="text-body-subtle">Dimensions</dt>
            <dd class="text-body-subtle">—</dd>
            {% endif %}

            <dt class="text-body-subtle">Created</dt>
            <dd class="text-body">{{ att.created_at or '—' }}</dd>

            <dt class="text-body-subtle">Updated</dt>
            <dd class="text-body">{{ att.updated_at or '—' }}</dd>

            {% if att.res_model %}
            <dt class="text-body-subtle">Linked to</dt>
            <dd class="text-body break-words">
                {% if owner_url %}
                <a href="{{ owner_url }}"
                   class="text-fg-brand hover:underline">
                    {{ att.res_model }} #{{ att.res_id }}
                </a>
                {% else %}
                {{ att.res_model }}{% if att.res_id %} #{{ att.res_id }}{% endif %}
                {% endif %}
            </dd>
            {% endif %}

            <dt class="text-body-subtle">Storage</dt>
            <dd class="text-body">
                {% if att.type == 'url' %}
                External URL
                {% elif att.storage_key %}
                Local backend
                {% else %}
                Inline (DB)
                {% endif %}
            </dd>

            <dt class="text-body-subtle">Public</dt>
            <dd>
                <form method="post"
                      action="/web/files/bulk/public"
                      onsubmit="event.preventDefault(); (async () => {
                          const next = !this.elements.public.dataset.current.includes('true');
                          const r = await fetch('/web/files/bulk/public', {
                              method:'POST', credentials:'same-origin',
                              headers:{
                                  'Content-Type':'application/json',
                                  'X-CSRF-Token': window.pvCsrf ? window.pvCsrf() : '',
                              },
                              body: JSON.stringify({ ids:[{{ att.id }}], public: next }),
                          });
                          if (r.ok) { window.pvToast && window.pvToast('Visibility updated.'); window.location.reload(); }
                          else { window.pvAlert && window.pvAlert('Update failed.', { variant:'danger' }); }
                      })();">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="public"
                               data-current="{{ 'true' if att.public else 'false' }}"
                               {% if att.public %}checked{% endif %}
                               onchange="this.form.requestSubmit()"
                               class="w-4 h-4 rounded border-default bg-neutral-secondary
                                      text-fg-brand checked:bg-fg-brand
                                      focus:ring-2 focus:ring-fg-brand">
                        <span class="text-body">{% if att.public %}Public{% else %}Private{% endif %}</span>
                    </label>
                </form>
            </dd>
        </dl>

        {% if panel_only %}
        <div class="flex flex-wrap items-center gap-2 pt-3 border-t border-default">
            <a href="/api/attachment/{{ att.id }}/download"
               class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs
                      bg-fg-brand text-white hover:opacity-90 transition">
                Download
            </a>
            <a href="/web/files/{{ att.id }}/properties"
               class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs
                      border border-default text-body hover:bg-neutral-secondary transition">
                Open properties page
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endset %}

{% if panel_only %}
{{ body }}
{% else %}
{% block content %}{{ body }}{% endblock %}
{% endif %}