{{#section 'head'}}
<link rel="stylesheet" href="/css/find-match.css">
{{/section}}

<div class="fm-screen">
    <header class="fm-header">
      <div class="fm-header-top">
        <div class="fm-heading">
          <button class="fm-menu-btn" onclick="showToast('More match options coming soon', 'info')" aria-label="Open match menu"><i class="bi bi-list"></i></button>
          <h1>{{__ "find_match.title"}}</h1>
        </div>
        <div class="fm-header-actions">
          <div class="fm-likes-counter-wrap" id="dailyLikesBadge" title="Daily Likes Remaining" style="display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; font-weight:600; padding:6px 12px; border-radius:50px; background:rgba(233,30,99,0.08); border:1px solid rgba(233,30,99,0.2); color:var(--primary);">
            <i class="bi bi-heart-fill" style="color:var(--primary); font-size:0.8rem;"></i>
            <span id="dailyLikesCounter">4/4 left today</span>
          </div>
          <button class="fm-filter-btn" id="filterToggle" onclick="openFilters()" aria-label="Open match filters" aria-controls="matchFilters" aria-expanded="false"><i class="bi bi-sliders2"></i><span class="fm-filter-count" id="filterCount"></span></button>
        </div>
      </div>

      <div class="fm-tabs" role="tablist" aria-label="Match categories">
        <button class="fm-tab fm-search-tab" onclick="openSearchModal()"><i class="bi bi-search"></i> {{__ "find_match.search"}}</button>
        <button class="fm-tab active" onclick="switchSwipeTab(this, 'discover')" role="tab">{{__ "find_match.discover"}}</button>
        <button class="fm-tab" onclick="switchSwipeTab(this, 'nearby')" role="tab">{{__ "find_match.nearby"}}</button>
        <button class="fm-tab" onclick="switchSwipeTab(this, 'premium')" role="tab">{{__ "find_match.premium"}}</button>
      </div>
    </header>

    <main class="fm-body">
      <div class="swipe-stack" id="swipeStack"></div>
    </main>

    <div class="fm-filter-backdrop" id="filterBackdrop" onclick="closeFilters()"></div>
    <aside class="fm-filter-sheet" id="matchFilters" aria-labelledby="filterTitle" aria-hidden="true">
      <div class="fm-filter-grabber"></div>
      <div class="fm-filter-header">
        <div>
          <span class="fm-filter-kicker">Refine your search</span>
          <h2 id="filterTitle">Match filters</h2>
        </div>
        <button class="fm-filter-close" type="button" onclick="closeFilters()" aria-label="Close filters"><i class="bi bi-x-lg"></i></button>
      </div>

      <form id="matchFilterForm">
        <div class="fm-filter-grid">
          <label class="fm-filter-field">
            <span>Age from</span>
            <select id="filterAgeMin">
              <option value="">Any age</option>
              <option value="21">21 years</option><option value="24">24 years</option>
              <option value="27">27 years</option><option value="30">30 years</option>
            </select>
          </label>
          <label class="fm-filter-field">
            <span>Age to</span>
            <select id="filterAgeMax">
              <option value="">Any age</option>
              <option value="28">28 years</option><option value="30">30 years</option>
              <option value="32">32 years</option><option value="35">35 years</option>
            </select>
          </label>
        </div>

        <div class="fm-filter-grid">
          <label class="fm-filter-field">
            <span>Religion</span>
            <select id="filterReligion" class="religion-select searchable-select">
              <option value="">Any religion</option>
            </select>
          </label>
          <label class="fm-filter-field">
            <span>Community</span>
            <select id="filterCommunity" class="caste-select searchable-select">
              <option value="">Any community</option>
            </select>
          </label>
        </div>

        <div class="fm-filter-grid">
          <label class="fm-filter-field">
            <span>State</span>
            <select id="filterState" class="state-select searchable-select">
              <option value="">Any state</option>
            </select>
          </label>
          <label class="fm-filter-field">
            <span>City</span>
            <select id="filterCity" class="city-select searchable-select">
              <option value="">Any city</option>
            </select>
          </label>
        </div>

        <label class="fm-filter-field">
          <span>Minimum match</span>
          <select id="filterMatch">
            <option value="">Any match score</option>
            <option value="90">90% and above</option>
            <option value="92">92% and above</option>
            <option value="95">95% and above</option>
          </select>
        </label>

        <label class="fm-filter-check">
          <input type="checkbox" id="filterPremium">
          <span class="fm-check-icon"><i class="bi bi-gem"></i></span>
          <span><strong>Premium profiles only</strong><small>Show profiles with Premium access</small></span>
          <i class="bi bi-check2 fm-check-mark"></i>
        </label>

        <div class="fm-filter-actions">
          <button class="fm-reset-btn" type="button" onclick="resetFilters()">Reset</button>
          <button class="fm-apply-btn" type="submit"><i class="bi bi-check2"></i> Apply filters</button>
        </div>
      </form>
    </aside>

    <!-- Search Modal -->
    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered px-3">
        <div class="modal-content" style="border-radius: 18px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.12);">
          <div class="modal-header border-0 pb-0 pt-4 px-4">
            <h5 class="modal-title fw-bold" id="searchModalLabel">Search Profile</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body p-4">
            <p class="text-muted small mb-3">Enter a Suvarna Bandhan Profile ID to view their complete details.</p>
            <form onsubmit="event.preventDefault(); submitProfileSearch();">
              <div class="input-group mb-4" style="border-radius: 12px; overflow: hidden; border: 1.5px solid rgba(233, 30, 99, 0.15); background: rgba(233, 30, 99, 0.02);">
                <span class="input-group-text bg-transparent border-0" style="color: var(--primary); padding-left: 16px;"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-0 bg-transparent" id="searchInput" placeholder="e.g. SB12345" required style="box-shadow: none; font-weight: 500;">
              </div>
              <button type="submit" class="btn btn-gradient w-100" style="border-radius: 12px; padding: 12px; font-weight: 600; font-size: 0.95rem;">Search Profile</button>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>

  
{{#section 'scripts'}}
<script src="/js/find-match.js"></script>
{{/section}}