{% extends "base.html" %}

{% block title %}{{ t(key="about-title", lang=lang) }}{% endblock title %}
{% block meta_description %}{{ t(key="meta-description-about", lang=lang) }}{% endblock meta_description %}

{% block content %}
<div class="mx-auto max-w-2xl">
  <div class="mb-4 flex items-center justify-between gap-2">
    <h1 class="text-2xl font-bold">
      {% if title %}{{ title }}{% else %}{{ t(key="about-title", lang=lang) }}{% endif %}
    </h1>
    {% if logged_in | default(value=false) %}
    <a href="/admin/about" class="btn btn-ghost btn-sm">{{ t(key="about-edit", lang=lang) }}</a>
    {% endif %}
  </div>

  <div class="card border border-base-300 bg-base-100 shadow-sm">
    <div class="card-body gap-4">
      {% if body %}
      <p class="whitespace-pre-line leading-relaxed">{{ body }}</p>
      {% endif %}

      {% if address or phone or email %}
      <dl class="divide-y divide-base-300 border-t border-base-300 pt-1">
        {% if address %}
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="about-address", lang=lang) }}</dt>
          <dd class="whitespace-pre-line text-right text-sm font-medium">{{ address }}</dd>
        </div>
        {% endif %}
        {% if phone %}
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="about-phone", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">
            <a href="tel:{{ phone }}" class="link link-hover">{{ phone }}</a>
          </dd>
        </div>
        {% endif %}
        {% if email %}
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="about-email", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">
            <a href="mailto:{{ email }}" class="link link-hover">{{ email }}</a>
          </dd>
        </div>
        {% endif %}
      </dl>
      {% endif %}
    </div>
  </div>
</div>
{% endblock content %}