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

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

{% block content %}
<div class="max-w-xl mx-auto py-10">
  <div class="bg-white border border-slate-200 rounded-3xl p-8 sm:p-10 shadow-lg text-center space-y-6">
    
    <!-- Warning Icon -->
    <div class="w-16 h-16 rounded-2xl bg-rose-50 border border-rose-200 text-rose-600 flex items-center justify-center mx-auto">
      <span class="material-symbols-outlined text-[34px]">warning</span>
    </div>

    <div>
      <h1 class="font-display font-black text-2xl text-slate-900 tracking-tight">
        Hapus Solusi Portofolio?
      </h1>
      <p class="text-xs sm:text-sm text-slate-500 mt-2 leading-relaxed">
        Apakah Anda yakin ingin menghapus solusi <strong class="text-slate-900">"{{ app.title }}"</strong> dari katalog? Solusi ini tidak akan ditampilkan lagi pada halaman portal demo.
      </p>
    </div>

    <!-- Mini Preview of Application -->
    <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200 text-left flex items-center gap-3">
      {% if app.mockup_url %}
      <img src="{{ app.mockup_url }}" alt="{{ app.title }}" class="w-14 h-14 rounded-xl object-cover border border-slate-200 flex-shrink-0"/>
      {% else %}
      <div class="w-14 h-14 rounded-xl bg-slate-200 flex items-center justify-center text-slate-400 flex-shrink-0">
        <span class="material-symbols-outlined text-[24px]">{{ app.icon|default:'apps' }}</span>
      </div>
      {% endif %}
      <div class="min-w-0">
        <div class="text-[10px] font-mono text-slate-500 uppercase">{{ app.category_badge }}</div>
        <div class="font-display font-bold text-sm text-slate-900 truncate">{{ app.title }}</div>
        <div class="text-[11px] text-slate-500 font-mono truncate">{{ app.subdomain }}</div>
      </div>
    </div>

    <!-- Actions -->
    <form method="POST" class="pt-2 flex items-center justify-center gap-3">
      {% csrf_token %}
      <a href="{% url 'portal:dashboard' %}" class="w-1/2 py-2.5 px-4 rounded-xl text-xs sm:text-sm font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 border border-slate-200 transition-all text-center">
        Batalkan
      </a>
      <button 
        type="submit" 
        class="w-1/2 py-2.5 px-4 rounded-xl text-xs sm:text-sm font-display font-bold text-white bg-rose-600 hover:bg-rose-700 shadow-md shadow-rose-600/25 active:scale-95 transition-all flex items-center justify-center gap-1.5"
      >
        <span class="material-symbols-outlined text-[17px]">delete_forever</span>
        <span>Ya, Hapus Solusi</span>
      </button>
    </form>

  </div>
</div>
{% endblock %}