{% extends "dashboard/base.html" %}
{% load dash_extras %}

{% block content %}
<div class="grid gap-5 lg:grid-cols-[1fr_300px]">

  <form method="post" enctype="multipart/form-data" class="reveal">
    {% csrf_token %}

    {% if form.non_field_errors %}
      <div class="mb-5 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-300">
        {% for e in form.non_field_errors %}<p>{{ e }}</p>{% endfor %}
      </div>
    {% endif %}

    <div class="card card-glow p-6 sm:p-8">
      <div class="grid gap-5 sm:grid-cols-2">
        {% for field in form %}
          {% field_widget_type field as wtype %}
          {% if wtype == 'Textarea' %}
            {% include "dashboard/partials/field.html" with field=field wide=True %}
          {% else %}
            {% include "dashboard/partials/field.html" with field=field wide=False %}
          {% endif %}
        {% endfor %}
      </div>
    </div>

    <div class="sticky bottom-0 mt-5 flex gap-3 rounded-2xl border border-white/10 glass p-4">
      <button type="submit" class="btn btn-primary btn-shine flex-1 sm:flex-none">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        Simpan Profil
      </button>
      <a href="{% url 'core:about' %}" target="_blank" class="btn btn-ghost">Lihat Halaman</a>
    </div>
  </form>

  <aside class="reveal reveal-right space-y-5 lg:sticky lg:top-24 lg:self-start">
    <div class="card overflow-hidden">
      {% if profile.photo %}
        <img src="{{ profile.photo.url }}" alt="" class="aspect-square w-full object-cover">
      {% else %}
        <div class="grid aspect-square place-items-center bg-gradient-to-br from-brand-500/15 to-gold-400/5">
          <span class="font-display text-5xl font-extrabold text-ember">{{ profile.full_name|slice:":2"|upper }}</span>
        </div>
      {% endif %}
      <div class="p-4">
        <p class="font-display text-sm font-bold text-neutral-50">{{ profile.full_name }}</p>
        <p class="mt-0.5 text-xs text-brand-400">{{ profile.headline }}</p>
      </div>
    </div>

    <div class="card p-5">
      <div class="mb-3 flex items-center justify-between">
        <p class="text-xs font-bold uppercase tracking-[0.16em] text-brand-500">Social Links</p>
        <a href="{% url 'dashboard:social_create' %}" class="text-xs font-semibold text-brand-400 hover:text-gold-400">+ Tambah</a>
      </div>
      <div class="space-y-2">
        {% for link in social_links %}
          <a href="{% url 'dashboard:social_update' link.pk %}" class="flex items-center justify-between gap-2 rounded-lg px-2.5 py-2 transition hover:bg-white/5">
            <span class="min-w-0">
              <span class="block text-sm font-medium text-neutral-200">{{ link.display_label }}</span>
              <span class="block truncate text-xs text-neutral-600">{{ link.url }}</span>
            </span>
            {% if not link.is_active %}<span class="shrink-0 text-xs text-neutral-600">off</span>{% endif %}
          </a>
        {% empty %}
          <p class="py-3 text-center text-xs text-neutral-600">Belum ada tautan sosial.</p>
        {% endfor %}
      </div>
      <a href="{% url 'dashboard:social_list' %}" class="btn btn-ghost mt-4 w-full !py-2 !text-xs">Kelola Semua</a>
    </div>
  </aside>
</div>
{% endblock %}