{% extends 'master.html' %}
{% load static %}
{% block content %}
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="card shadow-lg border-0 rounded-4 p-5 mb-4 bg-light">
          <!-- Template Image -->
          <div class="text-center">
            <img src="{{ template.image.url }}" class="img-fluid rounded shadow-sm template-image" alt="{{ template.name }}" />
          </div>

          <!-- Template Details -->
          <div class="text-center mt-4">
            <h2 class="fw-bold text-dark">{{ template.name }}</h2>
            <h4 class="text-success fw-bold mt-2">Rs. {{ template.price }}</h4>
            <p class="lead text-muted">{{ template.description }}</p>
          </div>

          <!-- Customization Form -->
          <form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
            {% csrf_token %}
        
            <div class="mb-3">
                <label class="form-label fw-semibold">Ad Title:</label>
                <input type="text" name="title" id="title" class="form-control rounded-3 shadow-sm" placeholder="Ad Title" required />
                <div class="invalid-feedback">Title is required.</div>
            </div>
        
            <div class="mb-3">
                <label class="form-label fw-semibold">Ad Description:</label>
                <textarea name="description" id="description" class="form-control rounded-3 shadow-sm" rows="3" placeholder="Describe your customization" required></textarea>
                <div class="invalid-feedback">Description is required.</div>
            </div>
        
            <div class="mb-3">
                <label class="form-label fw-semibold">Choose Color:</label>
                <input type="color" name="color" id="color" class="form-control form-control-color rounded-pill shadow-sm" required />
                <div class="invalid-feedback">Please select a color.</div>
            </div>
        
            <div class="mb-3">
                <label class="form-label fw-semibold">Choose Font Style:</label>
                <select name="style" id="style" class="form-select rounded-3 shadow-sm" required>
                    <option value="">Select a style</option>
                    <option value="modern">Modern</option>
                    <option value="classic">Classic</option>
                    <option value="minimalist">Minimalist</option>
                    <option value="vintage">Vintage</option>
                    <option value="luxury">Luxury</option>
                    <option value="bold">Bold</option>
                </select>
                <div class="invalid-feedback">Please select a font style.</div>
            </div>
        
            <div class="mb-3">
                <label class="form-label fw-semibold">Upload Image:</label>
                <input type="file" name="image" id="image" class="form-control rounded-3 shadow-sm" accept="image/*" required />
                <div class="invalid-feedback">Please upload an image.</div>
            </div>
        
            <div class="d-flex justify-content-center gap-3">
                
                <button type="submit" name="continue" class="btn btn-outline-success shadow-sm rounded-3 px-4 py-2">Continue</button>
            </div>
        </form>
        

          <div class="mt-4 text-center">
            <a href="{% url 'indexview' %}" class="btn btn-outline-secondary px-4 py-2 rounded-3 shadow-sm">Back to Templates</a>
          </div> 
        </div>
      </div>
    </div>
  </div>

  <style>
    .container {
      padding-top: 60px;
    }
    
    .card {
      max-width: 850px;
      margin: auto;
      padding: 40px;
      border-radius: 15px;
      background: #fff;
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    
    .card:hover {
      transform: scale(1.02);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .template-image {
      width: 100%;
      max-height: 450px;
      object-fit: contain; /* Ensures the whole image is visible */
      border-radius: 10px;
      background-color: #f8f9fa; /* Light background to fill empty spaces */
      padding: 10px; /* Adds padding to balance the aspect ratio */
      transition: transform 0.3s ease-in-out;
    }
    
    
    .template-image:hover {
      transform: scale(1.05);
    }
    
    .btn-primary,
    .btn-success {
      font-size: 1rem;
      font-weight: 600;
      transition: all 0.3s ease-in-out;
    }
    
    .btn-primary:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }
    
    .btn-success:hover {
      background-color: #218838;
      transform: scale(1.05);
    }
    
    .btn-outline-secondary:hover {
      background-color: #6c757d;
      color: white;
      transform: scale(1.05);
    }
    
    .form-control,
    .form-select {
      border-radius: 8px;
      padding: 10px;
    }
    
    .fw-semibold {
      font-weight: 600;
    }
  </style>
    
{% endblock %}