{% extends "base.html" %}
{% block content %}
<style>
/* Mobile filter improvements */
@media(max-width:768px){
  /* Dietary pills — horizontal scroll on mobile */
  .diet-pills-wrap{display:flex;overflow-x:auto;flex-wrap:nowrap;gap:.35rem;padding-bottom:.25rem;-webkit-overflow-scrolling:touch;}
  .diet-pills-wrap::-webkit-scrollbar{height:3px;}
  .diet-pills-wrap::-webkit-scrollbar-thumb{background:#dee2e6;border-radius:3px;}
  .diet-pill{white-space:nowrap;flex-shrink:0;}

  /* Tag categories — collapsible on mobile */
  .tag-cat-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:.35rem .5rem;background:#f8f9fa;border-radius:6px;margin-bottom:.3rem;}
  .tag-cat-header .tag-cat-arrow{font-size:.65rem;color:#9ca3af;transition:transform .2s;}
  .tag-cat-body{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem .5rem .4rem;}
  .tag-cat-body.closed{display:none;}
  .tag-pill{font-size:.68rem!important;padding:.2rem .5rem!important;}

  /* Filter card padding */
  .card-body.bg-light{padding:.75rem!important;}

  /* Ingredient accordion smaller */
  #ingredientAccordion{max-height:40vh!important;}

  /* Refine row — stack on mobile */
  .refine-row .col-4{width:100%!important;flex:0 0 100%;}
}
@media(min-width:769px){
  .tag-cat-body{display:flex!important;flex-wrap:wrap;gap:.25rem;padding:0 0 .4rem;}
  .tag-cat-arrow{display:none;}
  .tag-cat-header{background:transparent!important;padding:.1rem 0!important;margin-bottom:.25rem!important;}
}
</style>

<div class="sticky-top shadow-sm" id="recipeFilterBar" style="background-color: #198754; z-index: 1020; padding-top: 10px;">
    <div class="container pb-3">
        <form id="searchForm" method="{{ 'POST' if request.args.get('pantry_mode') == 'on' else 'GET' }}" 
              action="{{ url_for('recipes') }}">
            
            <input type="hidden" name="keep_menu" id="keepMenuState" value="{{ request.args.get('keep_menu', '0') }}">
            {% if request.args.get('pantry_mode') == 'on' %}
                <input type="hidden" name="pantry_mode" value="on">
            {% endif %}
            <input type="hidden" name="match_all" id="match_all_input" value="{{ request.args.get('match_all', '0') }}">
            {% if request.args.get('dietary_vegan') %}<input type="hidden" name="dietary_vegan" value="1">{% endif %}
            {% if request.args.get('dietary_vegetarian') %}<input type="hidden" name="dietary_vegetarian" value="1">{% endif %}
            {% if request.args.get('dietary_gluten_free') %}<input type="hidden" name="dietary_gluten_free" value="1">{% endif %}
            {% if request.args.get('dietary_dairy_free') %}<input type="hidden" name="dietary_dairy_free" value="1">{% endif %}
            {% if request.args.get('dietary_nut_free') %}<input type="hidden" name="dietary_nut_free" value="1">{% endif %}
            {% if request.args.get('dietary_halal') %}<input type="hidden" name="dietary_halal" value="1">{% endif %}

            <div class="row g-2">
                <div class="col-auto">
                    <button class="btn btn-outline-light border-2" type="button" 
                            data-bs-toggle="collapse" data-bs-target="#filterMenu"
                            aria-expanded="{{ 'true' if request.args.get('keep_menu') == '1' else 'false' }}">
                        <i class="fas fa-sliders-h"></i>
                    </button>
                </div>
                <div class="col">
                    <div class="input-group position-relative">
                        <input type="text" name="q" id="recipeSearchInput" class="form-control border-0 shadow-none" 
                               placeholder="Search keyword..." 
                               value="{{ request.args.get('q', '') }}"
                               autocomplete="off">
                        <div id="recipeTypeahead" style="position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid #dee2e6;border-radius:0 0 8px 8px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:none;max-height:300px;overflow-y:auto"></div>
                        <button class="btn btn-light text-success fw-bold" type="submit">GO</button>
                    </div>
                </div>
            </div>

            {% set menu_open = request.args.get('pantry_mode') == 'on' or selected_ids or request.args.get('keep_menu') == '1' %}
            <div class="collapse mt-2 {{ 'show' if menu_open }}" id="filterMenu" style="max-height:70vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;">
                <div class="card border-0 shadow-sm rounded-3">
                    <div class="card-body bg-light">
                        
                        {# ── APPLY + PANTRY TOGGLE ROW ── #}
                        <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
                          <div class="d-flex align-items-center gap-2">
                            {% if request.args.get('pantry_mode') == 'on' %}
                              <a href="{{ url_for('recipes', keep_menu='1') }}" class="btn btn-sm btn-success rounded-pill fw-bold shadow-sm" style="font-size:.7rem;padding:.2rem .65rem;white-space:nowrap">
                                <i class="fas fa-toggle-on me-1"></i> Pantry Mode
                              </a>
                            {% else %}
                              <a href="{{ url_for('recipes', pantry_mode='on', keep_menu='1') }}" class="btn btn-sm btn-outline-secondary rounded-pill shadow-sm" style="font-size:.7rem;padding:.2rem .65rem;white-space:nowrap">
                                <i class="fas fa-toggle-off me-1"></i> Filter Mode
                              </a>
                            {% endif %}
                            {% if request.args.get('pantry_mode') != 'on' %}
                            <span id="matchToggle" onclick="toggleMatchAll()"
                              class="badge rounded-pill border"
                              style="font-size:.65rem;cursor:pointer;padding:3px 8px;
                                     {% if request.args.get('match_all') == '1' %}background:#198754;color:#fff;border-color:#198754{% else %}background:#fff;color:#6c757d;border-color:#dee2e6{% endif %}">
                              {% if request.args.get('match_all') == '1' %}Match ALL{% else %}Match ANY{% endif %}
                            </span>
                            {% endif %}
                          </div>
                          {% if request.args.get('pantry_mode') == 'on' %}
                            <button type="submit" class="btn btn-success btn-sm rounded-pill fw-bold shadow-sm">Save &amp; Find</button>
                          {% else %}
                            <button type="submit" class="btn btn-success btn-sm rounded-pill fw-bold shadow-sm">Apply Filters</button>
                          {% endif %}
                        </div>

                        {# ── 2. CUISINE + SORT ── #}
                        <div class="mb-3 pb-3 border-bottom">
                          <div class="small fw-bold text-muted mb-2"><i class="fas fa-sliders-h me-1"></i>REFINE RESULTS</div>
                          <div class="row g-2 refine-row">
                            <div class="col-4">
                              <select name="cuisine" class="form-select form-select-sm shadow-sm">
                                <option value="">All Cuisines</option>
                                {% for c in cuisines %}
                                <option value="{{ c }}" {{ 'selected' if request.args.get('cuisine') == c }}>{{ c }}</option>
                                {% endfor %}
                              </select>
                            </div>
                            <div class="col-4">
                              <select name="culinary_type" class="form-select form-select-sm shadow-sm">
                                <option value="">All Types</option>
                                {% for ct in culinary_types %}
                                <option value="{{ ct.name }}" {{ 'selected' if request.args.get('culinary_type') == ct.name }}>{{ ct.name }}</option>
                                {% endfor %}
                              </select>
                            </div>
                            <div class="col-4">
                              <select name="sort" class="form-select form-select-sm shadow-sm">
                                <option value="newest" {{ 'selected' if request.args.get('sort') == 'newest' }}>Newest</option>
                                <option value="oldest" {{ 'selected' if request.args.get('sort') == 'oldest' }}>Oldest</option>
                                <option value="asc" {{ 'selected' if request.args.get('sort') == 'asc' }}>A-Z</option>
                                <option value="desc" {{ 'selected' if request.args.get('sort') == 'desc' }}>Z-A</option>
                                <option value="random" {{ 'selected' if request.args.get('sort') == 'random' }}>Random</option>
                              </select>
                            </div>
                          </div>
                        </div>

                        {# ── 3. INGREDIENT ACCORDION ── #}
                        <div class="mb-3 pb-3 border-bottom">
                          <div class="d-flex align-items-center justify-content-between mb-2">
                            <div class="small fw-bold text-muted">
                              <i class="fas fa-carrot me-1"></i>INGREDIENTS
                              <a href="{{ url_for('pantry_master') }}" class="text-success text-decoration-none ms-2" style="font-size:.65rem;font-weight:400">(Manage Pantry)</a>
                            </div>
                            <span id="toggleAllCatsBtn" onclick="toggleAllCats()" style="font-size:.7rem;color:#198754;cursor:pointer;text-decoration:underline">Expand All</span>
                          </div>
                          <div class="bg-white border rounded p-2" style="max-height:45vh;overflow-y:auto;" id="ingredientAccordion">
                            {% if grouped_ingredients %}
                                {% for category, ingredients in grouped_ingredients.items() %}
                                    <div class="mb-2 border-bottom pb-1">
                                        <div class="d-flex justify-content: space-between align-items-center cursor-pointer py-2"
                                             data-bs-toggle="collapse" data-bs-target="#cat{{ loop.index }}">
                                            <span class="fw-bold text-dark small text-uppercase">{{ category }}</span>
                                            <i class="fas fa-chevron-down text-muted small"></i>
                                        </div>
                                        <div id="cat{{ loop.index }}" class="collapse">
                                            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-2 pb-2">
                                                {% for ing in ingredients %}
                                                <div class="col">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="ingredient_ids"
                                                               value="{{ ing.id }}" id="ing{{ ing.id }}"
                                                               {{ 'checked' if ing.id|string in selected_ids }}>
                                                        <label class="form-check-label text-secondary small text-nowrap text-truncate w-100" for="ing{{ ing.id }}" title="{{ ing.name }}">
                                                            {{ ing.name }}
                                                        </label>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div class="text-center text-muted small py-4">No ingredients found.</div>
                            {% endif %}
                        </div>

                        <div class="mt-3 pt-3 border-top">
                      <div class="small fw-bold text-muted mb-2"><i class="fas fa-tags me-1"></i>TAGS</div>
                      {# Dietary pills as first tag group #}
                      <div class="mb-2">
                        <div class="tag-cat-header" onclick="toggleTagCat(this)">
                          <span style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af">Dietary</span>
                          <span class="tag-cat-arrow">&#9660;</span>
                        </div>
                        <div class="tag-cat-body">
                          <input type="checkbox" class="diet-cb" name="dietary_vegan" id="f_vegan" value="1" {% if request.args.get('dietary_vegan') %}checked{% endif %}>
                          <label class="diet-pill tag-pill" for="f_vegan">🌱 Vegan</label>
                          <input type="checkbox" class="diet-cb" name="dietary_vegetarian" id="f_veg" value="1" {% if request.args.get('dietary_vegetarian') %}checked{% endif %}>
                          <label class="diet-pill tag-pill" for="f_veg">🥦 Vegetarian</label>
                          <input type="checkbox" class="diet-cb" name="dietary_gluten_free" id="f_gf" value="1" {% if request.args.get('dietary_gluten_free') %}checked{% endif %}>
                          <label class="diet-pill tag-pill" for="f_gf">🌾 Gluten-Free</label>
                          <input type="checkbox" class="diet-cb" name="dietary_dairy_free" id="f_df" value="1" {% if request.args.get('dietary_dairy_free') %}checked{% endif %}>
                          <label class="diet-pill tag-pill" for="f_df">🥛 Dairy-Free</label>
                          <input type="checkbox" class="diet-cb" name="dietary_nut_free" id="f_nf" value="1" {% if request.args.get('dietary_nut_free') %}checked{% endif %}>
                          <label class="diet-pill tag-pill" for="f_nf">🥜 Nut-Free</label>
                          <input type="checkbox" class="diet-cb" name="dietary_halal" id="f_hl" value="1" {% if request.args.get('dietary_halal') %}checked{% endif %}>
                          <label class="diet-pill tag-pill" for="f_hl">☪️ Halal</label>
                        </div>
                      </div>
                      {% set active_tags = request.args.getlist('tag') %}
                      {% set tag_categories = {'time-effort': 'Time & Effort', 'occasion': 'Occasion', 'method': 'Method', 'profile': 'Flavor Profile', 'practical': 'Practical'} %}
                      {% set grouped_tags = {} %}
                      {% for tag in all_tags %}
                        {% set cat = tag.category or 'other' %}
                        {% if cat not in grouped_tags %}{% set _ = grouped_tags.update({cat: []}) %}{% endif %}
                        {% set _ = grouped_tags[cat].append(tag) %}
                      {% endfor %}
                      {% for cat_key, cat_label in tag_categories.items() %}
                        {% if cat_key in grouped_tags %}
                        <div class="mb-2">
                          <div class="tag-cat-header" onclick="toggleTagCat(this)">
                            <span style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af">{{ cat_label }}</span>
                            <span class="tag-cat-arrow">&#9660;</span>
                          </div>
                          <div class="tag-cat-body">
                            {% for tag in grouped_tags[cat_key] %}
                            <a href="javascript:void(0)"
                               onclick="toggleTagFilter('{{ tag.slug }}')"
                               class="badge rounded-pill text-decoration-none tag-pill {{ 'bg-success text-white' if tag.slug in active_tags else 'bg-light text-secondary border' }}"
                               style="font-size:.72rem;padding:.3rem .6rem;cursor:pointer"
                               data-slug="{{ tag.slug }}">{{ tag.name }}</a>
                            {% endfor %}
                          </div>
                        </div>
                        {% endif %}
                      {% endfor %}
                      <script>
                      // Set sticky filter bar top to actual nav height
                      function setFilterTop(){
                        var nav = document.querySelector('.navbar') || document.querySelector('nav');
                        var bar = document.getElementById('recipeFilterBar');
                        if(nav && bar) bar.style.top = nav.offsetHeight + 'px';
                      }
                      setFilterTop();
                      window.addEventListener('resize', setFilterTop);

                      // Hide FAB when filter open (mobile only)
                      document.getElementById('filterMenu').addEventListener('show.bs.collapse', function(){
                        var fab = document.getElementById('addRecipeFab');
                        if(fab && window.innerWidth < 768) fab.style.visibility='hidden';
                      });
                      document.getElementById('filterMenu').addEventListener('hide.bs.collapse', function(){
                        var fab = document.getElementById('addRecipeFab');
                        if(fab) fab.style.visibility='visible';
                      });
                      function toggleTagCat(header) {
                        var body = header.nextElementSibling;
                        var arrow = header.querySelector('.tag-cat-arrow');
                        body.classList.toggle('closed');
                        if(arrow) arrow.style.transform = body.classList.contains('closed') ? 'rotate(-90deg)' : 'rotate(0deg)';
                      }
                      function toggleTagFilter(slug) {
                        var url = new URL(window.location.href);
                        var tags = url.searchParams.getAll('tag');
                        var idx = tags.indexOf(slug);
                        url.searchParams.delete('tag');
                        if (idx === -1) {
                          tags.push(slug);
                        } else {
                          tags.splice(idx, 1);
                        }
                        tags.forEach(function(t){ url.searchParams.append('tag', t); });
                        url.searchParams.delete('page');
                        window.location.href = url.toString();
                      }
                      </script>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>

<div class="container py-4" style="padding-bottom: 100px;">
    <div class="d-flex justify-content-between align-items-end mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <small class="text-muted">
                {% if request.args.get('pantry_mode') == 'on' %}
                    <span class="badge bg-success">Pantry Mode</span>
                {% endif %}
                {{ total_count }} recipe{{ 's' if total_count != 1 }}
                {% if total_pages > 1 %} &mdash; page {{ page }} of {{ total_pages }}{% endif %}
            </small>
            <!-- VIEW TOGGLE -->
            <div class="btn-group btn-group-sm" role="group">
                <a href="{{ url_for('recipes', **dict(request.args.to_dict(), display='horizontal')) }}"
                   class="btn {{ 'btn-success' if display == 'horizontal' else 'btn-outline-secondary' }}" title="Horizontal cards">
                    <i class="fas fa-grip-lines"></i>
                </a>
                <a href="{{ url_for('recipes', **dict(request.args.to_dict(), display='big')) }}"
                   class="btn {{ 'btn-success' if display == 'big' else 'btn-outline-secondary' }}" title="Big cards">
                    <i class="fas fa-th-large"></i>
                </a>
                <a href="{{ url_for('recipes', **dict(request.args.to_dict(), display='small')) }}"
                   class="btn {{ 'btn-success' if display == 'small' else 'btn-outline-secondary' }}" title="Small cards">
                    <i class="fas fa-th"></i>
                </a>
                <a href="{{ url_for('recipes', **dict(request.args.to_dict(), display='list')) }}"
                   class="btn {{ 'btn-success' if display == 'list' else 'btn-outline-secondary' }}" title="List view">
                    <i class="fas fa-list"></i>
                </a>
            </div>
        </div>
        {% if request.args.get('q') or selected_ids or request.args.get('cuisine') or request.args.get('culinary_type') or request.args.getlist('tag') or request.args.get('dietary_vegan') or request.args.get('dietary_vegetarian') or request.args.get('dietary_gluten_free') or request.args.get('dietary_dairy_free') or request.args.get('dietary_nut_free') or request.args.get('dietary_halal') %}
            <a href="{{ url_for('recipes') }}" class="btn btn-sm btn-outline-danger border-0">
               <i class="fas fa-times me-1"></i>Clear All
            </a>
        {% endif %}
    </div>

    {# ── RECIPE GRID — display-aware ── #}
    {% if display == 'list' %}
    <div class="d-flex flex-column" style="gap:1px;border-radius:10px;overflow:hidden;border:1px solid #e5e7eb">
        {% for recipe in recipes %}
        <div style="background:#fff;border-bottom:1px solid #f1f5f9">
            <div class="row g-0 align-items-stretch">
                <div class="col-auto" style="width:90px;height:90px;overflow:hidden;background:#f3f4f6;flex-shrink:0">
                    {% if recipe.image_filename %}
                    <img src="{{ url_for('static', filename=('uploads/' + recipe.image_filename) if not '/' in recipe.image_filename else recipe.image_filename) }}" style="width:90px;height:90px;object-fit:cover;display:block">
                    {% else %}
                    <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted"><i class="fas fa-utensils fa-lg opacity-25"></i></div>
                    {% endif %}
                </div>
                <div class="col d-flex align-items-center px-3 py-2">
                    <div class="flex-grow-1 min-width-0">
                        <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="text-decoration-none">
                            <div class="fw-bold text-dark mb-1" style="font-size:.92rem">{{ recipe.title }}</div>
                        </a>
                        <div class="d-flex flex-wrap gap-3" style="font-size:.72rem;color:#6b7280">
                            {% if recipe.prep_time %}<span><i class="fas fa-clock me-1 text-success"></i>{{ recipe.prep_time }}m prep</span>{% endif %}
                            {% if recipe.cook_time %}<span><i class="fas fa-fire me-1 text-danger"></i>{{ recipe.cook_time }}m cook</span>{% endif %}
                            {% if recipe.servings %}<span><i class="fas fa-users me-1"></i>{{ recipe.servings }} serv</span>{% endif %}
                            {% if recipe.cuisine %}<span><i class="fas fa-globe me-1"></i>{{ recipe.cuisine }}</span>{% endif %}
                            {% if recipe.culinary_type %}<span><i class="fas fa-tag me-1"></i>{{ recipe.culinary_type }}</span>{% endif %}
                        </div>
                        {% if recipe.recipe_tags %}
                        <div class="mt-1">
                            {% for rt in recipe.recipe_tags[:4] %}<span class="badge me-1" style="background:#f3f4f6;color:#374151;font-size:.6rem">{{ rt.tag.name }}</span>{% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-auto d-flex align-items-center pe-3">
                    <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="btn btn-outline-success btn-sm">View <i class="fas fa-chevron-right ms-1" style="font-size:.65rem"></i></a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% elif display == 'small' %}
    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
        {% for recipe in recipes %}
        <div class="col">
            <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100 overflow-hidden">
                    <div style="height:120px;overflow:hidden;background:#f3f4f6">
                        {% if recipe.image_filename %}
                        <img src="{{ url_for('static', filename=('uploads/' + recipe.image_filename) if not '/' in recipe.image_filename else recipe.image_filename) }}" style="width:100%;height:100%;object-fit:cover">
                        {% else %}
                        <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted"><i class="fas fa-utensils fa-2x opacity-25"></i></div>
                        {% endif %}
                    </div>
                    <div class="card-body p-2">
                        <div class="fw-semibold text-dark" style="font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ recipe.title }}</div>
                        <div class="text-muted mt-1" style="font-size:.7rem">
                            {% if recipe.prep_time or recipe.cook_time %}
                            <i class="fas fa-clock me-1"></i>{{ (recipe.prep_time or 0) + (recipe.cook_time or 0) }}m
                            {% endif %}
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>

    {% elif display == 'big' %}
    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
        {% for recipe in recipes %}
        <div class="col">
            <div class="card border-0 shadow-sm h-100 overflow-hidden">
                <div style="height:180px;overflow:hidden;background:#f3f4f6">
                    {% if recipe.image_filename %}
                    <img src="{{ url_for('static', filename=('uploads/' + recipe.image_filename) if not '/' in recipe.image_filename else recipe.image_filename) }}" style="width:100%;height:100%;object-fit:cover">
                    {% else %}
                    <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted"><i class="fas fa-utensils fa-3x opacity-25"></i></div>
                    {% endif %}
                </div>
                <div class="card-body pb-2">
                    <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="text-decoration-none">
                        <h6 class="fw-bold text-dark mb-1">{{ recipe.title }}</h6>
                    </a>
                    {% if recipe.description %}
                    <p class="text-muted mb-2" style="font-size:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ recipe.description }}</p>
                    {% endif %}
                    <div class="d-flex flex-wrap gap-2 mb-2" style="font-size:.72rem;color:#6b7280">
                        {% if recipe.prep_time %}<span><i class="fas fa-clock me-1 text-success"></i>{{ recipe.prep_time }}m prep</span>{% endif %}
                        {% if recipe.cook_time %}<span><i class="fas fa-fire me-1 text-danger"></i>{{ recipe.cook_time }}m cook</span>{% endif %}
                        {% if recipe.servings %}<span><i class="fas fa-users me-1"></i>{{ recipe.servings }} serv</span>{% endif %}
                        {% if recipe.cuisine %}<span><i class="fas fa-globe me-1"></i>{{ recipe.cuisine }}</span>{% endif %}
                    </div>
                    {% for rt in recipe.recipe_tags[:3] %}
                    <span class="badge rounded-pill me-1" style="background:#f3f4f6;color:#374151;font-size:.6rem">{{ rt.tag.name }}</span>
                    {% endfor %}
                </div>
                <div class="card-footer bg-white border-0 pt-0 pb-2 px-3">
                    <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="btn btn-outline-success btn-sm w-100">View Recipe</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% else %}
    {# DEFAULT: horizontal #}
    <div class="row g-4">
        {% for recipe in recipes %}
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100 overflow-hidden">
                <div class="row g-0 h-100">
                    <div class="col-4" style="height:200px;overflow:hidden;background:#f3f4f6;flex-shrink:0">
                        {% if recipe.image_filename %}
                        <img src="{{ url_for('static', filename=('uploads/' + recipe.image_filename) if not '/' in recipe.image_filename else recipe.image_filename) }}" style="width:100%;height:100%;object-fit:cover">
                        {% else %}
                        <div class="w-100 h-100 d-flex align-items-center justify-content-center text-muted"><i class="fas fa-utensils fa-2x opacity-25"></i></div>
                        {% endif %}
                    </div>
                    <div class="col-8 d-flex flex-column">
                        <div class="card-body flex-grow-1 py-3 px-3">
                            <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="text-decoration-none">
                                <h6 class="fw-bold text-dark mb-1 text-truncate">{{ recipe.title }}</h6>
                            </a>
                            {% if recipe.description %}
                            <p class="text-muted mb-2" style="font-size:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ recipe.description }}</p>
                            {% endif %}
                            <div class="d-flex flex-wrap gap-2 mb-2" style="font-size:.72rem;color:#6b7280">
                                {% if recipe.prep_time %}<span><i class="fas fa-clock me-1 text-success"></i>{{ recipe.prep_time }}m prep</span>{% endif %}
                                {% if recipe.cook_time %}<span><i class="fas fa-fire me-1 text-danger"></i>{{ recipe.cook_time }}m cook</span>{% endif %}
                                {% if recipe.servings %}<span><i class="fas fa-users me-1"></i>{{ recipe.servings }} serv</span>{% endif %}
                                {% if recipe.cuisine %}<span><i class="fas fa-globe me-1"></i>{{ recipe.cuisine }}</span>{% endif %}
                            </div>
                            <div>
                                {% for rt in recipe.recipe_tags[:3] %}
                                <span class="badge rounded-pill me-1" style="background:#f3f4f6;color:#374151;font-size:.62rem">{{ rt.tag.name }}</span>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="px-3 pb-2">
                            <a href="{{ url_for('view_recipe', recipe_id=recipe.id) }}" class="btn btn-outline-success btn-sm w-100" style="font-size:.75rem">View Recipe</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- PAGINATION -->
    {% if total_pages > 1 %}
    <div class="d-flex justify-content-center align-items-center gap-2 mt-4 pb-3 flex-wrap">
        {% set args = request.args.to_dict() %}
        {% if page > 1 %}
            {% set _ = args.update({'page': page - 1}) %}
            <a href="{{ url_for('recipes', **args) }}" class="btn btn-outline-success btn-sm"><i class="fas fa-chevron-left"></i></a>
        {% else %}
            <button class="btn btn-outline-secondary btn-sm" disabled><i class="fas fa-chevron-left"></i></button>
        {% endif %}

        {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
                <button class="btn btn-success btn-sm" style="min-width:2.2rem">{{ p }}</button>
            {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
                {% set _ = args.update({'page': p}) %}
                <a href="{{ url_for('recipes', **args) }}" class="btn btn-outline-success btn-sm" style="min-width:2.2rem">{{ p }}</a>
            {% elif p == page - 3 or p == page + 3 %}
                <span class="text-muted px-1">…</span>
            {% endif %}
        {% endfor %}

        {% if page < total_pages %}
            {% set _ = args.update({'page': page + 1}) %}
            <a href="{{ url_for('recipes', **args) }}" class="btn btn-outline-success btn-sm"><i class="fas fa-chevron-right"></i></a>
        {% else %}
            <button class="btn btn-outline-secondary btn-sm" disabled><i class="fas fa-chevron-right"></i></button>
        {% endif %}

        <select class="form-select form-select-sm ms-2" style="width:auto" onchange="setPerPage(this.value)">
            <option value="10" {{ 'selected' if per_page == 10 }}>10 / page</option>
            <option value="25" {{ 'selected' if per_page == 25 }}>25 / page</option>
            <option value="50" {{ 'selected' if per_page == 50 }}>50 / page</option>
            <option value="100" {{ 'selected' if per_page == 100 }}>100 / page</option>
        </select>
    </div>
    {% endif %}
</div>

<a id="addRecipeFab" href="{{ url_for('upload_recipe') }}" class="btn btn-success rounded-circle shadow-lg d-flex align-items-center justify-content-center position-fixed" style="bottom: 30px; right: 30px; width: 60px; height: 60px; z-index: 900; border: none;">
    <i class="fas fa-plus fa-xl text-white"></i>
</a>
<script>
  function toggleAllCats() {
    var btn = document.getElementById('toggleAllCatsBtn');
    var expanding = btn.textContent.trim() === 'Expand All';
    // Ingredient accordion
    var sections = document.querySelectorAll('#ingredientAccordion .collapse');
    sections.forEach(function(s){
      if(expanding) new bootstrap.Collapse(s,{show:true});
      else new bootstrap.Collapse(s,{hide:true});
    });
    // Tag groups
    document.querySelectorAll('.tag-cat-body').forEach(function(b){
      if(expanding) b.classList.remove('closed'); else b.classList.add('closed');
    });
    document.querySelectorAll('.tag-cat-arrow').forEach(function(a){
      a.style.transform = expanding ? 'rotate(0deg)' : 'rotate(-90deg)';
    });
    btn.textContent = expanding ? 'Collapse All' : 'Expand All';
  }
  // Recipe typeahead data
  var _recipeIndex = [
    {% for recipe in recipes %}
    {id: {{ recipe.id }}, title: {{ recipe.title|tojson }}, url: "{{ url_for('view_recipe', recipe_id=recipe.id) }}"},
    {% endfor %}
  ];

  // Also load all recipes for search (not just current page)
  var _allRecipes = null;
  function loadAllRecipes(cb) {
    if(_allRecipes) { cb(_allRecipes); return; }
    fetch('/api/recipes/search-index')
      .then(function(r){ return r.json(); })
      .then(function(d){ _allRecipes = d.recipes || []; cb(_allRecipes); })
      .catch(function(){ cb(_recipeIndex); });
  }

  var _taInput = document.getElementById('recipeSearchInput');
  var _taDrop = document.getElementById('recipeTypeahead');
  var _taSelected = -1;

  if(_taInput) {
    _taInput.addEventListener('input', function() {
      var q = this.value.trim().toLowerCase();
      if(q.length < 2) { _taDrop.style.display='none'; return; }
      loadAllRecipes(function(recipes) {
        var matches = recipes.filter(function(r){
          return r.title.toLowerCase().indexOf(q) >= 0;
        }).slice(0, 8);
        if(matches.length === 0) { _taDrop.style.display='none'; return; }
        _taDrop.innerHTML = matches.map(function(r, i) {
          var hl = r.title.replace(new RegExp('('+q+')', 'gi'), '<strong>$1</strong>');
          return '<div class="ta-item" data-url="'+r.url+'" data-idx="'+i+'" style="padding:.5rem .75rem;cursor:pointer;font-size:.85rem;border-bottom:1px solid #f3f4f6" onmousedown="window.location=this.dataset.url" onmouseover="taHover('+i+')">'+hl+'</div>';
        }).join('');
        _taDrop.style.display = 'block';
        _taSelected = -1;
      });
    });

    _taInput.addEventListener('keydown', function(e) {
      var items = _taDrop.querySelectorAll('.ta-item');
      if(e.key === 'ArrowDown') { e.preventDefault(); _taSelected = Math.min(_taSelected+1, items.length-1); taHighlight(items); }
      else if(e.key === 'ArrowUp') { e.preventDefault(); _taSelected = Math.max(_taSelected-1, -1); taHighlight(items); }
      else if(e.key === 'Enter' && _taSelected >= 0) { e.preventDefault(); window.location = items[_taSelected].dataset.url; }
      else if(e.key === 'Escape') { _taDrop.style.display='none'; }
    });

    _taInput.addEventListener('blur', function() {
      setTimeout(function(){ _taDrop.style.display='none'; }, 150);
    });
  }

  function taHover(idx) { _taSelected = idx; taHighlight(document.querySelectorAll('.ta-item')); }
  function taHighlight(items) {
    items.forEach(function(item, i) {
      item.style.background = i === _taSelected ? '#f0fdf4' : '';
    });
  }

  function setPerPage(val) {
    var url = new URL(window.location.href);
    url.searchParams.set('per_page', val);
    url.searchParams.set('page', '1');
    window.location.href = url.toString();
  }

  function toggleMatchAll() {
    var input = document.getElementById('match_all_input');
    var toggle = document.getElementById('matchToggle');
    if (!input || !toggle) return;
    var isAll = input.value === '1';
    input.value = isAll ? '0' : '1';
    toggle.textContent = isAll ? 'Match ANY' : 'Match ALL';
    if (isAll) {
      toggle.style.background = '#fff';
      toggle.style.color = '#6c757d';
      toggle.style.borderColor = '#dee2e6';
    } else {
      toggle.style.background = '#198754';
      toggle.style.color = '#fff';
      toggle.style.borderColor = '#198754';
    }
  }
</script>
{% endblock %}