{% extends 'admin_base.html' %}
{% load custom_filters %}
{% load static %}

{% block content %}
<!-- Main Container with Background Pattern -->
<div class="min-h-screen py-12 bg-gradient-to-br from-gray-50 to-gray-100 bg-opacity-80">
  
  <!-- Form Card -->
  <div class="max-w-3xl mx-auto">
    <!-- Card Header - Floating Design -->
    <div class="relative z-10 flex justify-center">
      <div class="px-8 py-5 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-t-xl shadow-lg transform -translate-y-6">
        <h1 class="text-3xl font-bold text-white">
          {% if form.instance.pk %}Edit{% else %}Create{% endif %} Author Profile
        </h1>
      </div>
    </div>
    
    <!-- Main Form Card -->
    <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100 -mt-4">
      <div class="text-center mb-8">
        <p class="text-gray-600 text-lg">Complete the information below to {% if form.instance.pk %}update{% else %}create{% endif %} an author profile</p>
        <div class="h-1 w-24 bg-gradient-to-r from-blue-500 to-indigo-600 mx-auto mt-3 rounded-full"></div>
      </div>
      
      <form method="post" enctype="multipart/form-data" class="space-y-8">
        {% csrf_token %}
        
        <!-- Display form errors at the top -->
        {% if form.errors %}
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-red-800">
                There were errors with your submission
              </h3>
              <div class="mt-2 text-sm text-red-700">
                <ul class="list-disc pl-5 space-y-1">
                  {% for field in form %}
                    {% for error in field.errors %}
                      <li>{{ error }}</li>
                    {% endfor %}
                  {% endfor %}
                  {% for error in form.non_field_errors %}
                    <li>{{ error }}</li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        </div>
        {% endif %}
        
        <!-- Top Section: Status & Name -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Name Input -->
          <div class="group relative">
            <div class="absolute -top-2.5 left-3 bg-white px-2 text-blue-600 text-sm font-medium">
              <label for="{{ form.name.id_for_label }}">Author's Name</label>
            </div>
            {{ form.name }}
            <div class="absolute right-4 top-3.5 text-blue-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
          
          <!-- Status Dropdown -->
          <div class="group relative">
            <div class="absolute -top-2.5 left-3 bg-white px-2 text-blue-600 text-sm font-medium">
              <label for="{{ form.status.id_for_label }}">Status</label>
            </div>
            {{ form.status }}
            <div class="absolute right-4 top-3.5 text-blue-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>
        
        <!-- Profile Image Upload -->
        <div class="relative rounded-lg border-2 border-dashed border-gray-300 p-6 transition-all hover:border-blue-500 focus-within:border-blue-500 group">
          <div class="text-center">
            <svg class="mx-auto h-12 w-12 text-gray-400 group-hover:text-blue-500 transition-colors" stroke="currentColor" fill="none" viewBox="0 0 48 48">
              <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <div class="mt-2 flex justify-center text-sm text-gray-600">
              <label for="{{ form.image.id_for_label }}" class="relative cursor-pointer rounded-md font-medium text-blue-600 focus-within:outline-none">
                <span>Upload a profile image</span>
                {{ form.image }}
              </label>
            </div>
            <p class="text-xs text-gray-500 mt-1">PNG, JPG, GIF up to 1MB</p>
          </div>
          <div id="image-preview-container" class="mt-4 flex justify-center {% if not form.instance.image %}hidden{% endif %}">
            <div class="relative">
              <img id="preview-image" class="h-32 w-32 object-cover rounded-full border-4 border-white shadow-lg" 
                   src="{% if form.instance.image %}{{ form.instance.image.url }}{% endif %}" 
                   alt="Author preview">
              <button type="button" id="clear-image" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 shadow-md hover:bg-red-600 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
        </div>
        
        <!-- Description Textarea -->
        <div class="group relative">
          <div class="absolute -top-2.5 left-3 bg-white px-2 text-blue-600 text-sm font-medium">
            <label for="{{ form.description.id_for_label }}">Author Bio</label>
          </div>
          {{ form.description }}
          <div class="absolute right-4 top-3.5 text-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
        
        <!-- Affiliation Input -->
        <div class="group relative">
          <div class="absolute -top-2.5 left-3 bg-white px-2 text-blue-600 text-sm font-medium">
            <label for="{{ form.affilation.id_for_label }}">Affiliation</label>
          </div>
          {{ form.affilation }}
          <div class="absolute right-4 top-3.5 text-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 01-1.581.814L10 13.197l-4.419 2.617A1 1 0 014 15V4z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
        
        <!-- Contact Information -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Phone Input -->
          <div class="group relative">
            <div class="absolute -top-2.5 left-3 bg-white px-2 text-blue-600 text-sm font-medium">
              <label for="{{ form.phone.id_for_label }}">Phone Number</label>
            </div>
            {{ form.phone }}
            <div class="absolute right-4 top-3.5 text-blue-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
              </svg>
            </div>
          </div>
          
          <!-- Email Input -->
          <div class="group relative">
            <div class="absolute -top-2.5 left-3 bg-white px-2 text-blue-600 text-sm font-medium">
              <label for="{{ form.email.id_for_label }}">Email</label>
            </div>
            {{ form.email }}
            <div class="absolute right-4 top-3.5 text-blue-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
              </svg>
            </div>
          </div>
        </div>
        
      <!-- Submit Buttons -->
<div class="pt-6 flex space-x-4">
  <!-- Save/Update Button -->
  <button type="submit" name="submit" value="save" class="w-1/2 relative overflow-hidden group">
    <span class="absolute inset-0 w-full h-full transition duration-300 ease-out transform translate-x-0 -translate-y-0 bg-blue-600 group-hover:translate-x-0.5 group-hover:translate-y-0.5"></span>
    <span class="absolute inset-0 w-full h-full bg-gradient-to-br from-indigo-600 to-blue-700 border-2 border-blue-600 group-hover:bg-indigo-700 rounded-md"></span>
    <span class="relative flex justify-center items-center py-4 text-lg font-bold text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      {% if form.instance.pk %}Update{% else %}Save{% endif %}
    </span>
  </button>

  <!-- Save/Update and Add Another Button -->
  <button type="submit" name="submit" value="save_and_add" class="w-1/2 relative overflow-hidden group">
    <span class="absolute inset-0 w-full h-full transition duration-300 ease-out transform translate-x-0 -translate-y-0 bg-green-600 group-hover:translate-x-0.5 group-hover:translate-y-0.5"></span>
    <span class="absolute inset-0 w-full h-full bg-gradient-to-br from-green-600 to-emerald-700 border-2 border-green-600 group-hover:bg-green-700 rounded-md"></span>
    <span class="relative flex justify-center items-center py-4 text-lg font-bold text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      {% if form.instance.pk %}Update{% else %}Save{% endif %} and Add Another
    </span>
  </button>
</div>
<style>
  .alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

.alert-success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
</style>
{% if messages %}
<div class="messages">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }}">
        {{ message }}
    </div>
    {% endfor %}
</div>
{% endif %}

      </form>
    </div>
    
    <!-- Bottom Decoration -->
    <div class="h-2 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-b-xl shadow-lg mt-1"></div>
  </div>
</div>

<!-- Image compression library -->
<script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.min.js"></script>

<!-- Image uploader utility -->
<script src="{% static 'js/image_processor.js' %}"></script>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    new ImageUploader({
      inputSelector: '#{{ form.image.id_for_label }}',
      previewSelector: '#image-preview-container',
      slugifyFrom: '#{{ form.name.id_for_label }}', // Optional
      maxSizeMB: 1,                   // Optional
      maxWidth: 1200                  // Optional
    });
  });
</script>
{% endblock %}