{# templates/admin/field/vehicule_visuel_preview.html.twig #}
{%- set public_base = field.getCustomOption('public_base') ?: '' -%}
{%- set bucket = field.getCustomOption('bucket') ?: '' -%}
{%- set raw_path = field.value is defined and field.value is not empty ? field.value : (entity is defined and entity.instance is defined and entity.instance is not null and entity.instance.storagePath is defined ? entity.instance.storagePath : '') -%}
{%- set mode = field.getCustomOption('mode') ?: 'index' -%}

{%- if public_base and bucket and raw_path -%}
  {%- set segments = raw_path|split('/') -%}
  {%- set encoded_segments = [] -%}
  {%- for segment in segments -%}
    {%- set encoded_segments = encoded_segments|merge([segment|url_encode]) -%}
  {%- endfor -%}
  {%- set url = public_base|trim('/') ~ '/storage/v1/object/public/' ~ bucket|url_encode ~ '/' ~ encoded_segments|join('/') -%}
{%- else -%}
  {%- set url = '' -%}
{%- endif -%}

{%- set alt_text = (entity is defined and entity.instance is defined and entity.instance is not null and entity.instance.vehicule is not null)
    ? (entity.instance.vehicule ~ ' — ' ~ (entity.instance.angle|default('profil')|capitalize))
    : 'Visuel véhicule' -%}

<div class="ea-vehicule-visuel-preview ea-preview-{{ mode }}">
  {% if url is not empty %}
    {% if mode == 'index' %}
      <img src="{{ url }}" alt="{{ alt_text|e('html_attr') }}" style="max-width: 160px; max-height: 90px; width: auto; height: auto; object-fit: contain; border-radius: 6px; border: 1px solid rgba(0,0,0,0.12);" />
    {% elseif mode == 'detail' %}
      <div style="margin-bottom: 1rem;">
        <img src="{{ url }}" alt="{{ alt_text|e('html_attr') }}" style="max-width: 100%; max-height: 500px; width: auto; height: auto; object-fit: contain; border-radius: 8px; border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 2px 8px rgba(0,0,0,0.08);" />
      </div>
    {% elseif mode == 'edit' %}
      <div class="form-group mb-4">
        <label class="form-control-label fw-bold mb-2">Aperçu du visuel (non modifiable)</label>
        <div>
          <img src="{{ url }}" alt="{{ alt_text|e('html_attr') }}" style="max-width: 480px; max-height: 280px; width: 100%; height: auto; object-fit: contain; border-radius: 8px; border: 1px solid rgba(0,0,0,0.12); background-color: #f8f9fa; padding: 4px;" />
        </div>
      </div>
    {% endif %}
  {% else %}
    <span class="badge bg-secondary">Aucune image disponible</span>
  {% endif %}
</div>