{% extends 'portal/admin/base_admin.html' %}

{% block title %}Dashboard Portofolio — {{ brand.name }} CMS{% endblock %}

{% block content %}
<div class="space-y-8">
  
  <!-- Header & Title with Action Button -->
  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-200">
    <div>
      <div class="inline-flex items-center gap-2 text-xs font-mono font-bold text-brand-orange uppercase tracking-wider mb-1">
        <span class="w-2 h-2 rounded-full bg-brand-orange"></span>
        MANAJEMEN KATALOG ENTERPRISE
      </div>
      <h1 class="font-display font-black text-2xl sm:text-3xl text-slate-900 tracking-tight">
        Katalog Solusi &amp; Portofolio
      </h1>
      <p class="text-xs sm:text-sm text-slate-500 mt-1">
        Atur sistem unggulan, sesuaikan banner thumbnail tampilan browser, edit user persona, dan update link live sandbox.
      </p>
    </div>

    <div>
      <a href="{% url 'portal:create' %}" class="ripple-surface inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs sm:text-sm font-display font-bold text-white bg-gradient-to-r from-orange-600 via-brand-orange to-amber-500 hover:from-orange-500 hover:to-amber-400 shadow-md shadow-orange-500/25 hover:shadow-lg transition-all active:scale-95">
        <span class="material-symbols-outlined text-[19px]">add_circle</span>
        <span>Tambah Solusi Portofolio</span>
      </a>
    </div>
  </div>

  <!-- Metric Statistics Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
    <div class="p-5 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center gap-4">
      <div class="w-12 h-12 rounded-xl bg-orange-50 text-brand-orange border border-orange-200 flex items-center justify-center flex-shrink-0">
        <span class="material-symbols-outlined text-[24px]">apps</span>
      </div>
      <div>
        <div class="text-xs font-mono text-slate-500 font-medium">TOTAL PORTOFOLIO</div>
        <div class="font-display font-black text-2xl text-slate-900">{{ total_apps }} Solusi</div>
      </div>
    </div>

    <div class="p-5 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center gap-4">
      <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 border border-blue-200 flex items-center justify-center flex-shrink-0">
        <span class="material-symbols-outlined text-[24px]">category</span>
      </div>
      <div>
        <div class="text-xs font-mono text-slate-500 font-medium">KATEGORI AKTIF</div>
        <div class="font-display font-black text-2xl text-slate-900">{{ total_categories }} Kategori</div>
      </div>
    </div>

    <div class="p-5 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center gap-4">
      <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center flex-shrink-0">
        <span class="material-symbols-outlined text-[24px]">verified</span>
      </div>
      <div>
        <div class="text-xs font-mono text-slate-500 font-medium">STATUS SANDBOX</div>
        <div class="font-display font-black text-2xl text-emerald-700 flex items-center gap-1.5">
          <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 pulse-indicator"></span>
          All Online
        </div>
      </div>
    </div>
  </div>

  <!-- Applications List (Cards View) -->
  <div class="space-y-4">
    <div class="flex items-center justify-between text-xs font-mono text-slate-500 uppercase tracking-wider font-semibold px-1">
      <span>Daftar Portofolio Aktif ({{ applications|length }})</span>
      <span>Sinkronisasi Otomatis ke Frontend</span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {% for app in applications %}
      <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm hover:shadow-md transition-all flex flex-col justify-between space-y-5 group">
        
        <div class="space-y-4">
          <!-- Top Row: Category & Badges -->
          <div class="flex items-start justify-between gap-3">
            <div>
              <div class="flex flex-wrap items-center gap-2 mb-1.5">
                <span class="px-2.5 py-0.5 rounded-md text-[10px] font-mono font-bold uppercase tracking-wider {% if app.category_color == 'blue' %}bg-blue-50 text-blue-700 border border-blue-200{% else %}bg-orange-50 text-orange-700 border border-orange-200{% endif %}">
                  {{ app.category_badge }}
                </span>
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-mono font-medium text-emerald-700 bg-emerald-50 border border-emerald-200">
                  <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                  {{ app.status_badge }}
                </span>
              </div>
              <h3 class="font-display font-bold text-lg text-slate-900 group-hover:text-brand-orange transition-colors">
                {{ app.title }}
              </h3>
              <p class="text-xs text-slate-500 mt-0.5">
                {{ app.client_label }} <span class="font-semibold text-slate-700">{{ app.client_name }}</span>
              </p>
            </div>

            <div class="w-10 h-10 rounded-xl {% if app.category_color == 'blue' %}bg-blue-50 text-blue-600{% else %}bg-orange-50 text-brand-orange{% endif %} border border-slate-200 flex items-center justify-center flex-shrink-0">
              <span class="material-symbols-outlined text-[20px]">{{ app.icon }}</span>
            </div>
          </div>

          <!-- Thumbnail Banner Preview -->
          <div class="rounded-xl overflow-hidden border border-slate-200 bg-slate-100 shadow-sm relative">
            <div class="px-3 py-1.5 bg-slate-100 border-b border-slate-200 flex items-center justify-between text-[11px]">
              <div class="flex items-center gap-1.5">
                <span class="w-2 h-2 rounded-full bg-rose-400"></span>
                <span class="w-2 h-2 rounded-full bg-amber-400"></span>
                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
                <span class="ml-1 font-mono text-slate-600 truncate max-w-[140px]">{{ app.subdomain }}</span>
              </div>
              <span class="font-mono text-[10px] font-semibold text-blue-700 bg-blue-50 px-2 py-0.5 rounded border border-blue-200 truncate max-w-[160px]">
                {{ app.tech_stack }}
              </span>
            </div>
            <div class="h-44 w-full overflow-hidden bg-slate-50 flex items-center justify-center relative group/img">
              {% if app.mockup_url %}
              <img src="{{ app.mockup_url }}" alt="Banner {{ app.title }}" class="w-full h-full object-cover object-top group-hover/img:scale-105 transition-transform duration-300"/>
              {% else %}
              <div class="flex flex-col items-center justify-center text-slate-400 gap-1 p-4">
                <span class="material-symbols-outlined text-[32px]">image_not_supported</span>
                <span class="text-xs">Belum ada thumbnail banner</span>
              </div>
              {% endif %}
            </div>
          </div>

          <!-- Description -->
          <p class="text-xs text-slate-600 line-clamp-2 leading-relaxed">
            {{ app.description }}
          </p>

          <!-- Personas Chips -->
          {% if app.personas %}
          <div class="flex flex-wrap gap-1.5">
            {% for p in app.personas %}
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-medium bg-slate-100 text-slate-700 border border-slate-200">
              <span class="material-symbols-outlined text-[13px] text-brand-orange">{{ p.icon }}</span>
              {{ p.role }}
            </span>
            {% endfor %}
          </div>
          {% endif %}
        </div>

        <!-- Action Buttons -->
        <div class="pt-4 border-t border-slate-100 flex items-center justify-between gap-2">
          <a href="{% url 'portal:index' %}#katalog-demo" target="_blank" class="inline-flex items-center gap-1 text-xs font-semibold text-slate-500 hover:text-blue-600 transition-colors">
            <span class="material-symbols-outlined text-[15px]">visibility</span>
            <span>Lihat Live</span>
          </a>

          <div class="flex items-center gap-2">
            <a href="{% url 'portal:edit' app.key %}" class="inline-flex items-center gap-1 px-3.5 py-1.5 rounded-xl text-xs font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 border border-slate-200 active:scale-95 transition-all">
              <span class="material-symbols-outlined text-[16px] text-slate-600">edit</span>
              <span>Edit Portofolio &amp; Banner</span>
            </a>
            <a href="{% url 'portal:delete' app.key %}" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-xl text-xs font-semibold text-rose-600 bg-rose-50 hover:bg-rose-100 border border-rose-200 active:scale-95 transition-all" title="Hapus Portofolio">
              <span class="material-symbols-outlined text-[16px]">delete</span>
              <span>Hapus</span>
            </a>
          </div>
        </div>

      </div>
      {% empty %}
      <div class="col-span-2 text-center py-16 bg-white border border-slate-200 rounded-3xl p-8">
        <div class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 mx-auto mb-3">
          <span class="material-symbols-outlined text-[32px]">folder_off</span>
        </div>
        <h3 class="font-display font-bold text-lg text-slate-900">Belum Ada Solusi Portofolio</h3>
        <p class="text-xs text-slate-500 mt-1 max-w-sm mx-auto">
          Klik tombol di bawah untuk menambahkan sistem pertama Anda ke katalog portofolio.
        </p>
        <a href="{% url 'portal:create' %}" class="mt-5 inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-brand-orange hover:bg-orange-500 transition-all">
          <span class="material-symbols-outlined text-[18px]">add</span>
          <span>Tambah Portofolio Sekarang</span>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>

</div>
{% endblock %}