{% extends "structure/base.html" %}
{% from 'crud/_macros.html' import render_field %}
{% block title %}{{ construct.compose_title(construct.t("crud-view-rec", {'recname': construct.t(view.name, {'count': 1})})) }}{% endblock %}
{# This view renders its own visible <h1>, so suppress the layout default. #}
{% block page_heading %}{% endblock %}
{% block content %}
  {# Deliberately no <form>, no tabs and no save control: the fields arrive
     already forced readonly, and a form wrapper around them would only invite
     a POST this page has no route for. #}
  <div class="fcu-card">
    <div class="fcu-card-header" style="display: flex; justify-content: space-between; align-items: center;">
      <div style="display: flex; align-items: center; gap: 12px;">
        <a href="{{ next_url(view.url) }}"
           class="fcu-row-action"
           up-follow
           up-target="#main-content"
           title="{{ construct.t('crud-back-button') }}">
          {{ icon("back", label=construct.t("crud-back-button")) }}
        </a>
        <h1 class="fcu-text--h2" style="margin: 0;">{{ construct.t('crud-view-rec', {'recname': construct.t(view.name, {'count': 1}) }) }}</h1>
      </div>
      {% if edit_actions %}
        <div style="display: flex; gap: 8px;">
          {% for action in edit_actions %}
            <a href="{{ url_for(view.endpoint + '.' + action.endpoint, id=data[primary_key]) }}"
               style="color: var(--fcu-text-muted); text-decoration: none; display: inline-flex; align-items: center; padding: 4px;"
               title="{{ construct.t(action.name) }}"
               up-follow
               up-target="#main-content">
              {{ icon(action.icon, label=construct.t(action.name)) }}
            </a>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    {% block view_body %}
      <div class="fcu-card-body">
        {% for field, type in fields %}
          {{ render_field(construct, field, type, view, data, ds) }}
        {% endfor %}
      </div>
    {% endblock %}

    <div class="fcu-card-footer" style="display: flex; align-items: center; gap: 16px; background-color: var(--fcu-surface-alt); border-top: 1px solid var(--fcu-border); padding: 16px;">
      {% block view_actions %}
        <a href="{{ next_url(view.url) }}"
           class="fcu-btn fcu-btn--secondary"
           up-follow
           up-target="#main-content">
          {{ icon("back", style="font-size: 14px;") }} {{ construct.t("crud-back-button") }}
        </a>
      {% endblock %}
    </div>
  </div>
{% endblock %}