{% extends "base.html" %}
{% block title %}{{ model_name }} #{{ pk_value }} — KORM Admin{% endblock %}
{% block content %}
<div class="topbar">
  <h2>{{ model_name }} #{{ pk_value }}</h2>
  <div class="topbar-actions">
    <a href="/{{ model_name }}/{{ pk_value }}/edit" class="btn btn-primary btn-sm">Edit</a>
    <form method="post" action="/{{ model_name }}/{{ pk_value }}/delete" style="display:inline" x-data @submit.prevent="if(confirm('Delete this {{ model_name }} record?')) $el.submit()">
      <button type="submit" class="btn btn-sm btn-danger">Delete</button>
    </form>
    <a href="/{{ model_name }}/" class="btn btn-sm">Back to list</a>
  </div>
</div>

<div class="card">
  <table class="detail-table">
    <tbody>
      {% for col in columns %}
      <tr>
        <td>{{ col.name }}</td>
        <td>
          {% set val = row.get(col.name) %}
          {% if val is none %}
            <span style="color:var(--text-muted)">NULL</span>
          {% elif col.type in ('datetime', 'timestamp', 'date') and val %}
            {{ val }}
          {% elif col.type == 'boolean' %}
            <span :class="'badge ' + ({{ 'true' if val else 'false' }} ? 'badge-primary' : '')">{{ 'true' if val else 'false' }}</span>
          {% elif val is mapping or val is sequence and val is not string %}
            <pre style="font-size:.8125rem;background:var(--bg);padding:.5rem;border-radius:4px;overflow-x:auto;max-width:600px">{{ val | tojson }}</pre>
          {% else %}
            {{ val }}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if relations %}
<div class="topbar" style="margin-top:2rem">
  <h3>Relations</h3>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem">
  {% for rel in relations %}
  <div class="card">
    <div class="card-header">{{ rel.name }} <span class="badge">{{ rel.type }}</span></div>
    <div class="card-body" style="font-size:.875rem">
      <div>Model: <code>{{ rel.model }}</code></div>
      {% if rel.foreign_key %}<div>FK: <code>{{ rel.foreign_key }}</code></div>{% endif %}
      <div style="margin-top:.5rem">
        <a href="/{{ rel.model }}/" class="btn btn-sm">Browse {{ rel.model }}</a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
{% endblock %}