{% extends "base.html" %}
{% block title %}Home — IslamInLife Quran App{% endblock %}

{% block extra_style %}
<style>
  /* Scoped to the Home page only -- this block is empty on every other
     template, so none of this touches any other page's appearance. */
  body { background: #0d0d10 !important; }
  .qpa-home-bar { background: #151519 !important; border-bottom: 2px solid #2a2a30 !important; }

  .iqa-topbar {
    background: #151519; color: #f0f0f2; padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; border-radius: 12px; margin-bottom: 18px;
  }
  .iqa-topbar h1 { font-size: 19px; margin: 0; }
  .iqa-topbar div { font-size: 13px; }
  .iqa-topbar a { color: #8ecdf7; text-decoration: none; }
  .iqa-topbar a:hover { text-decoration: underline; }

  .iqa-stats-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
  .iqa-stats-strip .stat {
    flex: 1; min-width: 120px; background: #17171c; border: 1px solid #2a2a30;
    border-radius: 10px; padding: 12px 14px;
  }
  .iqa-stats-strip .stat .label { font-size: 11px; color: #9a9aa5; }
  .iqa-stats-strip .stat .value { font-size: 22px; font-weight: bold; color: #ffffff; }
  .iqa-stats-strip .stat .sub { font-size: 10px; color: #7a7a85; }

  .iqa-section {
    margin-bottom: 24px; border: 1px solid rgba(130, 170, 195, 0.45);
    border-radius: 12px; padding: 14px;
  }
  .iqa-section-header {
    background: #17171c; color: #f0f0f2; font-weight: bold; font-size: 17px;
    padding: 10px 16px; border-radius: 8px; margin-bottom: 10px;
    border-left: 4px solid #3a3a42;
  }
  .iqa-btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .iqa-btn {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 8px; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 13px;
    line-height: 1.2; border-radius: 8px; padding: 11px 14px; text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
    transition: transform 0.1s ease, filter 0.15s ease;
  }
  .iqa-btn .icon { font-size: 16px; flex-shrink: 0; }
  .iqa-btn .badge { font-size: 10px; font-weight: normal; opacity: 0.85; }
  .iqa-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .iqa-btn:active { transform: translateY(0); filter: brightness(0.95); }

  @media (max-width: 420px) {
    .iqa-btn-grid { grid-template-columns: repeat(2, 1fr); }
    .iqa-btn { font-size: 12px; padding: 10px 8px; }
  }
</style>
{% endblock %}

{% block body %}
<header class="iqa-topbar">
  <h1>📖 IslamInLife Quran App</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('memorization_plannings_summary') }}">Memorization Plans</a> &nbsp;·&nbsp; <a href="{{ url_for('account') }}">Account</a> &nbsp;·&nbsp; <a href="{{ url_for('logout') }}">Logout</a></div>
</header>
<main>

  <div class="iqa-stats-strip">
    <div class="stat">
      <div class="label">📖 Hifz Entries</div>
      <div class="value">{{ stats.hifz_count }}</div>
      <div class="sub">{{ stats.memorized_count }} memorized</div>
    </div>
    <div class="stat">
      <div class="label">📝 Revised Today</div>
      <div class="value">{{ stats.revised_today }}</div>
      <div class="sub">sessions</div>
    </div>
    <div class="stat">
      <div class="label">📌 FSR Pending</div>
      <div class="value">{{ stats.fsr_pending }}</div>
      <div class="sub">lessons</div>
    </div>
    <div class="stat">
      <div class="label">🗓️ No. of Plans</div>
      <div class="value">{{ stats.plan_count }}</div>
      <div class="sub">memorization plans</div>
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">🕒 Today's Actions</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#1a7a4a;" href="{{ url_for('today_plan') }}"><span class="icon">📿</span>Simple Plan for Today</a>
      <a class="iqa-btn" style="background:#6c3483;" href="{{ url_for('today_in_hifz') }}"><span class="icon">📿</span>Recap Today's Recitation</a>
      <a class="iqa-btn" style="background:#a04000;" href="{{ url_for('qcp_checkin') }}" title="Quran Completion &amp; Its Plan"><span class="icon">📖</span>QCP</a>
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">📿 Memorization &amp; Goals</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#1a5276;" href="{{ url_for('revision_log') }}"><span class="icon">🔁</span>Revision Log</a>
      <a class="iqa-btn" style="background:#6c3483;" href="{{ url_for('memorization') }}"><span class="icon">📿</span>My Sura Memorization</a>
      <a class="iqa-btn" style="background:#148f77;" href="{{ url_for('smgp_list') }}"><span class="icon">🎯</span>Special Memo Goal Plans</a>
      <a class="iqa-btn" style="background:#117864;" href="{{ url_for('lss_home') }}"><span class="icon">🎯</span>Learn Sura Sequence</a>
      {% if session_is_admin %}
      <a class="iqa-btn" style="background:#1a5276;" href="{{ url_for('ssrp_tonight') }}"><span class="icon">🕌</span>SSRP<span class="badge">(Admin only)</span></a>
      {% endif %}
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">📚 Reference &amp; Study</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#8e44ad;" href="{{ url_for('fsr_checkin') }}"><span class="icon">🔍📖💭</span>FSR Check-In</a>
      <a class="iqa-btn" style="background:#2471a3;" href="{{ url_for('suras_browse') }}"><span class="icon">📖</span>Browse &amp; Search Suras</a>
      <a class="iqa-btn" style="background:#5b2c6f;" href="{{ url_for('quran_viewer') }}"><span class="icon">📜</span>Quran Text Viewer</a>
      <a class="iqa-btn" style="background:#a04000;" href="{{ url_for('audio_home') }}"><span class="icon">🔊</span>Audio Playback</a>
      {% if session_is_admin %}
      <a class="iqa-btn" style="background:#5b2c6f;" href="{{ url_for('tafseer_view') }}"><span class="icon">📚</span>Tafseer References<span class="badge">(Admin only)</span></a>
      {% endif %}
    </div>
  </div>

  <div class="iqa-section">
    <div class="iqa-section-header">📊 Reports &amp; Data</div>
    <div class="iqa-btn-grid">
      <a class="iqa-btn" style="background:#1a5276;" href="{{ url_for('progress_report') }}"><span class="icon">📊</span>Progress Report</a>
      <a class="iqa-btn" style="background:#283747;" href="{{ url_for('data_backup') }}"><span class="icon">🗄️</span>Data &amp; Backup</a>
    </div>
  </div>

</main>
{% endblock %}