{% extends 'academy/base.html' %}
{% block title %}Delete Portfolio Item{% endblock %}

{% block extra_css %}
<style>
  .delete-page {
    padding: 3rem 4rem;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }

  .panel {
    background: var(--charcoal);
    border: 1px solid rgba(192, 57, 43, 0.3);
    border-radius: 12px;
    padding: 3rem 2.5rem;
  }

  .warning-icon {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    color: var(--red);
  }

  .item-info {
    background: rgba(255,255,255,0.05);
    padding: 1.5rem;
    border-radius: 10px;
    margin: 2rem 0;
    text-align: left;
  }

  .btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
  }
</style>
{% endblock %}

{% block content %}

<div class="delete-page">

  <div class="panel">
    <div class="warning-icon">⚠️</div>
    
    <h1 style="color: var(--red); margin-bottom: 0.5rem;">Delete Portfolio Item?</h1>
    <p style="color: var(--gray-light); font-size: 1.1rem;">
      This action cannot be undone.
    </p>

    <div class="item-info">
      <strong style="color: var(--white);">Title:</strong> {{ item.title }}<br>
      <strong style="color: var(--white);">Instructor:</strong> {{ item.instructor_name }}<br>
      <strong style="color: var(--white);">Category:</strong> {{ item.get_category_display }}
    </div>

    <p style="color: var(--gray); margin-bottom: 2rem;">
      Are you sure you want to permanently delete this portfolio item?
    </p>

    <form method="post" style="display: inline;">
      {% csrf_token %}
      <div class="btn-group">
        <a href="{% url 'admin_portfolio' %}" class="btn btn-dark" style="padding: 0.8rem 2rem;">
          Cancel
        </a>
        <button type="submit" class="btn btn-danger" style="padding: 0.8rem 2.5rem;">
          Yes, Delete Item
        </button>
      </div>
    </form>
  </div>

</div>

{% endblock %}