{% extends "base.html" %}
{% block title %}Home{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-12 text-center mb-3">
    <h1 class="display-6">BoardProsno</h1>
    <p class="text-muted">Previous board, admission & job questions — typed and easy to read.</p>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <div class="main-card text-center">
      <button class="btn btn-primary category-btn" data-target="ssc-options">SSC Questions</button>
      <div id="ssc-options" class="version-options" style="display:none;">
        <a class="btn btn-outline-primary" href="{{ url_for('version_page', exam='ssc', version='bangla') }}">Bangla</a>
        <a class="btn btn-outline-secondary" href="{{ url_for('version_page', exam='ssc', version='english') }}">English</a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="main-card text-center">
      <button class="btn btn-success category-btn" data-target="hsc-options">HSC Questions</button>
      <div id="hsc-options" class="version-options" style="display:none;">
        <a class="btn btn-outline-success" href="{{ url_for('version_page', exam='hsc', version='bangla') }}">Bangla</a>
        <a class="btn btn-outline-secondary" href="{{ url_for('version_page', exam='hsc', version='english') }}">English</a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="main-card text-center">
      <button class="btn btn-warning category-btn" data-target="admission-options">Admission Questions</button>
      <div id="admission-options" class="version-options" style="display:none;">
        <a class="btn btn-outline-warning" href="{{ url_for('version_page', exam='admission', version='bangla') }}">Bangla</a>
        <a class="btn btn-outline-secondary" href="{{ url_for('version_page', exam='admission', version='english') }}">English</a>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.category-btn').forEach(function(btn){
    btn.addEventListener('click', function(){
      // hide all version-options first
      document.querySelectorAll('.version-options').forEach(function(v){ v.style.display = 'none'; });
      var target = btn.getAttribute('data-target');
      var el = document.getElementById(target);
      if(el) el.style.display = 'flex';
      // scroll into view on mobile
      if (el) el.scrollIntoView({behavior: 'smooth', block: 'center'});
    });
  });
});
</script>
{% endblock %}