{% extends 'master.html' %}
{% load static %}

{% block content %}
  <div class="container mt-5">
    <!-- Increased top spacing -->
    <div class="row justify-content-center">
      <div class="col-md-12 col-lg-10">
        <div class="card shadow-lg border-0 rounded-lg p-4 mb-4">
          <!-- Template Image -->
          <div class="text-center mt-3">
            <img src="{{ templates.image.url }}" class="img-fluid rounded shadow-sm template-image" alt="{{ templates.name }}" />
          </div>

          <!-- Template Details -->
          <div class="text-center mt-4">
            <h2 class="fw-bold">{{ templates.name }}</h2>

            <!-- Ad Type -->
            <h5 class=" mt-2">Ad Type: {{ templates.ad_type }}</h5>

            <!-- Price -->
            <h4 class="text-success fw-bold mt-2">Rs. {{ templates.price }}</h4>

            <p class="lead text-muted">{{ templates.description }}</p>

            <!-- Buttons -->
            <div class="d-flex justify-content-center gap-3 mt-3">
              <a href="{% url 'customize_ad' template_id=templates.id %}" class="btn btn-secondary shadow-sm rounded-pill px-4">
                Customize
              </a>
              {% comment %}
              <a href="{% url 'indexview' %}" class="btn btn-outline-secondary px-4 py-2 rounded-pill shadow-sm">Back to Templates</a>
              {% endcomment %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .container {
      padding-top: 70px; /* Adds more top spacing */
    }

    .card {
      max-width: 900px; /* Set a max width */
      margin: auto; /* Center it horizontally */
      padding: 30px;
    }

    /* Responsive Image Styling */
    .template-image {
      width: 100%; /* Ensures image fills container */
      max-height: 500px; /* Prevents excessive stretching */
      object-fit: contain; /* Keeps the aspect ratio */
      border-radius: 10px;
      transition: transform 0.3s ease-in-out;
    }

    .template-image:hover {
      transform: scale(1.03);
    }

    .btn-primary {
      background-color: #007bff;
      border: none;
      transition: all 0.3s ease-in-out;
    }

    .btn-primary:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }

    .btn-outline-secondary:hover {
      background-color: #6c757d;
      color: white;
      transform: scale(1.05);
    }

    /* Price Styling */
    .text-success {
      font-size: 1.5rem;
    }
  </style>
{% endblock %}