{% extends 'base.html' %}

{% block title %}Dashbase{% endblock %}

{% block content %}
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    background: #e9e8f6;
    margin: 0;
    padding: 0;
  }

  h1 { margin-top: 20px; }
  h2 a { text-decoration: none; color: black; }

  .carousel-container {
    position: relative;
    width: 95%;
    margin: 30px auto;
    overflow: hidden;
  }
  .carousel { display: flex; transition: transform 0.5s ease-in-out; }
  .carousel-item { flex: 0 0 100%; max-width: 100%; display: flex; justify-content: center; }

  .outer-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 20px;
    width: 100%;
    max-width: 1100px;
  }

  .row { display: flex; flex-wrap: wrap; gap: 15px; }
  .col-half {
    flex: 1;
    min-width: 300px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    text-align: left;
  }
  .col-full {
    flex: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px;
    text-align: left;
  }

  .col-half h3, .col-full h3 { margin-top: 0; font-size: 16px; color: #222; }
  .col-half p, .col-full p { margin: 5px 0; font-size: 14px; }

  .arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 30px; background: #0056b3; color: white;
    border-radius: 50%; width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 100; user-select: none;
  }
  .arrow.left { left: -80px; }
  .arrow.right { right: -80px; }

  .dots { margin-top: 20px; }
  .dots span {
    display: inline-block; width: 12px; height: 12px;
    margin: 5px; border-radius: 50%; background: #bbb;
    cursor: pointer; transition: background 0.3s;
  }
  .dots span.active { background: #0056b3; }

  @media (max-width: 768px) {
    .row { flex-direction: column; }
    .arrow.left { left: 10px; }
    .arrow.right { right: 10px; }
  }
</style>

<h1><u>Hajela’s IAS DataBase</u></h1>

<!-- ================= PYQ’S ================= -->
<h2><a href="#">PYQ’S ( Sub-Topic Name [ Short Code-1234 ] )</a></h2>
<div class="carousel-container" id="pyq">
  <div class="arrow left" onclick="prevSlide('pyq')">&#10094;</div>
  <div class="carousel">
    <div class="carousel-item">
      <div class="outer-card">
        <div class="row">
          <div class="col-half"><h3>English — Question 101</h3><p>PYQ English content...</p></div>
          <div class="col-half"><h3>Hindi — Question 101</h3><p>PYQ Hindi content...</p></div>
        </div>
        <div class="col-full"><p><b>Meta Info:</b> PYQ details...</p></div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="outer-card">
        <div class="row">
          <div class="col-half"><h3>English — Question 102</h3><p>PYQ English content...</p></div>
          <div class="col-half"><h3>Hindi — Question 102</h3><p>PYQ Hindi content...</p></div>
        </div>
        <div class="col-full"><p><b>Meta Info:</b> PYQ details...</p></div>
      </div>
    </div>
  </div>
  <div class="arrow right" onclick="nextSlide('pyq')">&#10095;</div>
  <div class="dots"></div>
</div>

<!-- ================= MOQ’S ================= -->
<h2><a href="#">MOQ’S ( Sub-Topic Name [ Short Code-1234 ] )</a></h2>
<div class="carousel-container" id="moq">
  <div class="arrow left" onclick="prevSlide('moq')">&#10094;</div>
  <div class="carousel">
    <div class="carousel-item">
      <div class="outer-card">
        <div class="row">
          <div class="col-half"><h3>English — Question 201</h3><p>MOQ English content...</p></div>
          <div class="col-half"><h3>Hindi — Question 201</h3><p>MOQ Hindi content...</p></div>
        </div>
        <div class="col-full"><p><b>Meta Info:</b> MOQ details...</p></div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="outer-card">
        <div class="row">
          <div class="col-half"><h3>English — Question 202</h3><p>MOQ English content...</p></div>
          <div class="col-half"><h3>Hindi — Question 202</h3><p>MOQ Hindi content...</p></div>
        </div>
        <div class="col-full"><p><b>Meta Info:</b> MOQ details...</p></div>
      </div>
    </div>
  </div>
  <div class="arrow right" onclick="nextSlide('moq')">&#10095;</div>
  <div class="dots"></div>
</div>

<!-- ================= OSQ’S ================= -->
<h2><a href="#">OSQ’S ( Sub-Topic Name [ Short Code-1234 ] )</a></h2>
<div class="carousel-container" id="osq">
  <div class="arrow left" onclick="prevSlide('osq')">&#10094;</div>
  <div class="carousel">
    <div class="carousel-item">
      <div class="outer-card">
        <div class="row">
          <div class="col-half"><h3>English — Question 301</h3><p>OSQ English content...</p></div>
          <div class="col-half"><h3>Hindi — Question 301</h3><p>OSQ Hindi content...</p></div>
        </div>
        <div class="col-full"><p><b>Meta Info:</b> OSQ details...</p></div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="outer-card">
        <div class="row">
          <div class="col-half"><h3>English — Question 302</h3><p>OSQ English content...</p></div>
          <div class="col-half"><h3>Hindi — Question 302</h3><p>OSQ Hindi content...</p></div>
        </div>
        <div class="col-full"><p><b>Meta Info:</b> OSQ details...</p></div>
      </div>
    </div>
  </div>
  <div class="arrow right" onclick="nextSlide('osq')">&#10095;</div>
  <div class="dots"></div>
</div>

<script>
  const carousels = {};

  document.querySelectorAll(".carousel-container").forEach(container => {
    const id = container.id;
    const carousel = container.querySelector(".carousel");
    const slides = container.querySelectorAll(".carousel-item");
    const dotsContainer = container.querySelector(".dots");

    carousels[id] = { index: 0, total: slides.length, carousel, slides, dotsContainer };

    // Create dots
    slides.forEach((_, i) => {
      const dot = document.createElement("span");
      if (i === 0) dot.classList.add("active");
      dot.addEventListener("click", () => showSlide(id, i));
      dotsContainer.appendChild(dot);
    });
  });

  function updateDots(id) {
    const { index, dotsContainer } = carousels[id];
    [...dotsContainer.children].forEach((dot, i) => {
      dot.classList.toggle("active", i === index);
    });
  }

  function showSlide(id, newIndex) {
    const obj = carousels[id];
    if (!obj) return;

    if (newIndex < 0) obj.index = obj.total - 1;
    else if (newIndex >= obj.total) obj.index = 0;
    else obj.index = newIndex;

    obj.carousel.style.transform = `translateX(-${obj.index * 100}%)`;
    updateDots(id);
  }

  function prevSlide(id) { showSlide(id, carousels[id].index - 1); }
  function nextSlide(id) { showSlide(id, carousels[id].index + 1); }

  // Auto-play each carousel every 10s
  setInterval(() => {
    Object.keys(carousels).forEach(id => nextSlide(id));
  }, 10000);
</script>

{% endblock %}