{% extends 'assistant/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.dashboard %}{% endblock %}
{% block sidebar.patients %}{% endblock %}
{% block sidebar.appointments %}{% endblock %}
{% block sidebar.diets %} class="active" {% endblock %}

{% block content %}
    <div class="content">
        <div class="filter-container">
            <h5 class="filter-header">فیلترها</h5>
            <!-- The main filter/search form -->
            <form id="filterForm">
                <div class="filters-grid">
                    <!-- =============== Company Name =============== -->
                    <div class="filter-group">
                        <label for="company" class="text-center">شرکت‌ها</label>
                        <select id="company" name="company_name" class="form-control stylish-input">
                            <option value="" dir="rtl">همه شرکت‌ها</option>
                            <option value="Nestle"
                                {% if request.GET.company_name == "Nestle" %}selected{% endif %}>Nestle</option>
                        </select>
                    </div>

                    <!-- =============== City =============== -->
                    <div class="filter-group">
                        <label for="city" class="text-center">شهرها</label>
                        <select id="city" name="city" class="form-control stylish-input">
                            <option value="" dir="rtl">همه شهرها</option>
                            <option value="Tehran" {% if request.GET.city == "Tehran" %}selected{% endif %}>تهران</option>
                            <option value="Qazvin" {% if request.GET.city == "Qazvin" %}selected{% endif %}>قزوین</option>
                        </select>
                    </div>

                    <!-- =============== Bacteria Type =============== -->
                    <div class="filter-group">
                        <label for="bacteria_type" class="text-center">نوع باکتری‌ها</label>
                        <select id="bacteria_type" name="bacteria_type" class="form-control stylish-input">
                            <option value="" dir="rtl">همه نوع باکتری‌ها</option>
                            <option value="akkermansia" {% if request.GET.bacteria_type == "akkermansia" %}selected{% endif %}>Akkermansia</option>
                            <option value="bacteroides" {% if request.GET.bacteria_type == "bacteroides" %}selected{% endif %}>bacteroides</option>
                            <option value="bifidobacterium" {% if request.GET.bacteria_type == "bifidobacterium" %}selected{% endif %}>bifidobacterium</option>
                            <option value="faecalibacterium" {% if request.GET.bacteria_type == "faecalibacterium" %}selected{% endif %}>Faecalibacterium</option>
                            <option value="alistipes" {% if request.GET.bacteria_type == "alistipes" %}selected{% endif %}>Alistipes</option>
                            <option value="eubacterium" {% if request.GET.bacteria_type == "eubacterium" %}selected{% endif %}>eubacterium</option>
                            <option value="lactobacillus" {% if request.GET.bacteria_type == "lactobacillus" %}selected{% endif %}>Lactobacillus</option>
                            <option value="blautia" {% if request.GET.bacteria_type == "blautia" %}selected{% endif %}>blautia</option>
                            <option value="Bacteria_Acidaminococcus" {% if request.GET.bacteria_type == "Bacteria_Acidaminococcus" %}selected{% endif %}>Acidaminococcus</option>
                            <option value="Bacteria_Lawsonibacter_asaccharolyticus" {% if request.GET.bacteria_type == "Bacteria_Lawsonibacter_asaccharolyticus" %}selected{% endif %}>Lawsonibacter_asaccharolyticus</option>
                        </select>
                    </div>

                    <!-- =============== Diet Type =============== -->
                    <div class="filter-group">
                        <label for="diet_type" class="text-center">نوع رژیم ها</label>
                        <select id="diet_type" name="diet_type" class="form-control stylish-input">
                            <option value="" dir="rtl">همه نوع رژیم ها</option>
                            <option value="med" {% if request.GET.diet_type == "med" %}selected{% endif %}>med</option>
                            <option value="low_gi" {% if request.GET.diet_type == "low_gi" %}selected{% endif %}>low_gi</option>
                            <option value="fasting" {% if request.GET.diet_type == "fasting" %}selected{% endif %}>fasting</option>
                            <option value="keto" {% if request.GET.diet_type == "keto" %}selected{% endif %}>keto</option>
                            <option value="mind" {% if request.GET.diet_type == "mind" %}selected{% endif %}>mind</option>
                            <option value="sport" {% if request.GET.diet_type == "sport" %}selected{% endif %}>sport</option>
                            <option value="liquid" {% if request.GET.diet_type == "liquid" %}selected{% endif %}>liquid or purred diet</option>
                            <option value="eliminate_diet" {% if request.GET.diet_type == "eliminate_diet" %}selected{% endif %}>eliminate diet (sensitivity)</option>
                            <option value="low_fodmap" {% if request.GET.diet_type == "low_fodmap" %}selected{% endif %}>low fodmap</option>
                            <option value="pregnant" {% if request.GET.diet_type == "pregnant" %}selected{% endif %}>pregnant</option>
                            <option value="lactating" {% if request.GET.diet_type == "lactating" %}selected{% endif %}>lactating</option>
                            <option value="Diet_Low_Sugar" {% if request.GET.diet_type == "Diet_Low_Sugar" %}selected{% endif %}>Low_Sugar</option>
                            <option value="Diet_High_Protein" {% if request.GET.diet_type == "Diet_High_Protein" %}selected{% endif %}>High_Protein</option>
                            <option value="Whole_Foods" {% if request.GET.diet_type == "Whole_Foods" %}selected{% endif %}>Whole_Foods</option>
                            <option value="Diet_Low_Fat" {% if request.GET.diet_type == "Diet_Low_Fat" %}selected{% endif %}>Low_Fat</option>
                            <option value="Diet_Low_Calorie" {% if request.GET.diet_type == "Diet_Low_Calorie" %}selected{% endif %}>Low_Calorie</option>
                            <option value="Diet_Anti_Inflammatory" {% if request.GET.diet_type == "Diet_Anti_Inflammatory" %}selected{% endif %}>Anti_Inflammatory</option>
                            <option value="Diet_Paleo" {% if request.GET.diet_type == "Diet_Paleo" %}selected{% endif %}>Paleo</option>
                            <option value="Diet_Diabetic" {% if request.GET.diet_type == "Diet_Diabetic" %}selected{% endif %}>Diabetic</option>
                            <option value="Diet_Low_Carb" {% if request.GET.diet_type == "Diet_Low_Carb" %}selected{% endif %}>Low_Carb</option>
                            <option value="Diet_Bodybuilding" {% if request.GET.diet_type == "Diet_Bodybuilding" %}selected{% endif %}>Bodybuilding</option>
                            <option value="Diet_Vegan" {% if request.GET.diet_type == "Diet_Vegan" %}selected{% endif %}>Vegan</option>
                            <option value="Diet_Vegetarian" {% if request.GET.diet_type == "Diet_Vegetarian" %}selected{% endif %}>Vegetarian</option>
                            <option value="Diet_Plant_Based" {% if request.GET.diet_type == "Diet_Plant_Based" %}selected{% endif %}>Plant_Based</option>
                            <option value="Diet_Gluten_Free" {% if request.GET.diet_type == "Diet_Gluten_Free" %}selected{% endif %}>Gluten_Free</option>
                        </select>
                    </div>

                    <!-- =============== Diseases Type =============== -->
                    <div class="filter-group">
                        <label for="diseases_type" class="text-center">نوع بیماری ها</label>
                        <select id="diseases_type" name="diseases_type" class="form-control stylish-input">
                            <option value="" dir="rtl">همه نوع بیماری ها</option>
                            <option value="fatty_liver" {% if request.GET.diseases_type == "fatty_liver" %}selected{% endif %}>fatty liver</option>
                            <option value="diabetes" {% if request.GET.diseases_type == "diabetes" %}selected{% endif %}>diabetes</option>
                            <option value="ibs" {% if request.GET.diseases_type == "ibs" %}selected{% endif %}>ibs</option>
                            <option value="pcos" {% if request.GET.diseases_type == "pcos" %}selected{% endif %}>pcos</option>
                            <option value="neghres" {% if request.GET.diseases_type == "neghres" %}selected{% endif %}>neghres</option>
                            <option value="ms" {% if request.GET.diseases_type == "ms" %}selected{% endif %}>ms</option>
                            <option value="obesity_surgery" {% if request.GET.diseases_type == "obesity_surgery" %}selected{% endif %}>obesity surgery</option>
                            <option value="renal" {% if request.GET.diseases_type == "renal" %}selected{% endif %}>renal</option>
                            <option value="cvd" {% if request.GET.diseases_type == "cvd" %}selected{% endif %}>cvd</option>
                            <option value="migraine" {% if request.GET.diseases_type == "migraine" %}selected{% endif %}>migraine</option>
                            <option value="cancer" {% if request.GET.diseases_type == "cancer" %}selected{% endif %}>cancer</option>
                            <option value="nervous_disease" {% if request.GET.diseases_type == "nervous_disease" %}selected{% endif %}>nervous disease</option>
                            <option value="gi_disease" {% if request.GET.diseases_type == "gi_disease" %}selected{% endif %}>gi disease</option>
                            <option value="healthy" {% if request.GET.diseases_type == "healthy" %}selected{% endif %}>healthy</option>
                            <option value="Disease_Kidney" {% if request.GET.diseases_type == "Disease_Kidney" %}selected{% endif %}>Kidney</option>
                            <option value="Disease_Kidney_stones" {% if request.GET.diseases_type == "Disease_Kidney_stones" %}selected{% endif %}>Kidney_stones</option>
                            <option value="Disease_Acid_reflux" {% if request.GET.diseases_type == "Disease_Acid_reflux" %}selected{% endif %}>Acid_reflux</option>
                            <option value="Disease_Celiac" {% if request.GET.diseases_type == "Disease_Celiac" %}selected{% endif %}>Celiac</option>
                            <option value="Disease_Diverticulitis" {% if request.GET.diseases_type == "Disease_Diverticulitis" %}selected{% endif %}>Diverticulitis</option>
                            <option value="Disease_Hypothyroidism" {% if request.GET.diseases_type == "Disease_Hypothyroidism" %}selected{% endif %}>Hypothyroidism</option>
                            <option value="Disease_Gastroesophageal_Reflux" {% if request.GET.diseases_type == "Disease_Gastroesophageal_Reflux" %}selected{% endif %}>Gastroesophageal_Reflux</option>
                            <option value="Disease_Foodborne_Illness" {% if request.GET.diseases_type == "Disease_Foodborne_Illness" %}selected{% endif %}>Foodborne_Illness</option>
                            <option value="Disease_High_blood_pressure" {% if request.GET.diseases_type == "Disease_High_blood_pressure" %}selected{% endif %}>High_blood_pressure</option>
                            <option value="Disease_High_cholesterol" {% if request.GET.diseases_type == "Disease_High_cholesterol" %}selected{% endif %}>High_cholesterol</option>
                            <option value="Disease_Hypercholesterolemia" {% if request.GET.diseases_type == "Disease_Hypercholesterolemia" %}selected{% endif %}>Hypercholesterolemia</option>
                            <option value="Disease_G6PD_Deficiency" {% if request.GET.diseases_type == "Disease_G6PD_Deficiency" %}selected{% endif %}>G6PD_Deficiency</option>
                            <option value="Disease_Constipation" {% if request.GET.diseases_type == "Disease_Constipation" %}selected{% endif %}>Constipation</option>
                            <option value="Disease_Gallbladder" {% if request.GET.diseases_type == "Disease_Gallbladder" %}selected{% endif %}>Gallbladder</option>
                            <option value="Disease_Latex_Fruit_Syndrome" {% if request.GET.diseases_type == "Disease_Latex_Fruit_Syndrome" %}selected{% endif %}>Latex_Fruit_Syndrome</option>
                            <option value="Disease_Obesity" {% if request.GET.diseases_type == "Disease_Obesity" %}selected{% endif %}>Obesity</option>
                            <option value="Disease_Diarrhea" {% if request.GET.diseases_type == "Disease_Diarrhea" %}selected{% endif %}>Diarrhea</option>
                            <option value="Disease_Cyst" {% if request.GET.diseases_type == "Disease_Cyst" %}selected{% endif %}>Cyst</option>
                        </select>
                    </div>
                    <!-- =============== Allergens Type =============== -->
                    <div class="filter-group">
                        <label for="allergic_type" class="text-center">نوع آلرژی ها</label>
                        <select id="allergic_type" name="allergic_type" class="form-control stylish-input">
                            <option value="" dir="rtl">همه نوع آلرژی ها</option>
                            <option value="Allergens_Peanut" {% if request.GET.allergic_type == "Allergens_Peanut" %}selected{% endif %}>Allergens_Peanut</option>
                            <option value="Allergens_Wheat" {% if request.GET.allergic_type == "Allergens_Wheat" %}selected{% endif %}>Allergens_Wheat</option>
                            <option value="Allergens_Shrimp" {% if request.GET.allergic_type == "Allergens_Shrimp" %}selected{% endif %}>Allergens_Shrimp</option>
                            <option value="Allergens_Mushroom" {% if request.GET.allergic_type == "Allergens_Mushroom" %}selected{% endif %}>Allergens_Mushroom</option>
                            <option value="Allergens_Eggplant" {% if request.GET.allergic_type == "Allergens_Eggplant" %}selected{% endif %}>Allergens_Eggplant</option>
                            <option value="Allergens_Dried_fruits" {% if request.GET.allergic_type == "Allergens_Dried_fruits" %}selected{% endif %}>Allergens_Dried_fruits</option>
                            <option value="Allergens_Gluten" {% if request.GET.allergic_type == "Allergens_Gluten" %}selected{% endif %}>Allergens_Gluten</option>
                            <option value="Allergens_Fish" {% if request.GET.allergic_type == "Allergens_Fish" %}selected{% endif %}>Allergens_Fish</option>
                            <option value="Allergens_Sesame" {% if request.GET.allergic_type == "Allergens_Sesame" %}selected{% endif %}>Allergens_Sesame</option>
                            <option value="Allergens_Shellfish" {% if request.GET.allergic_type == "Allergens_Shellfish" %}selected{% endif %}>Allergens_Shellfish</option>
                            <option value="Allergens_Nuts" {% if request.GET.allergic_type == "Allergens_Nuts" %}selected{% endif %}>Allergens_Nuts</option>
                            <option value="Allergens_Soy" {% if request.GET.allergic_type == "Allergens_Soy" %}selected{% endif %}>Allergens_Soy</option>
                            <option value="Allergens_Eggs" {% if request.GET.allergic_type == "Allergens_Eggs" %}selected{% endif %}>Allergens_Eggs</option>
                            <option value="Allergens_Peanuts" {% if request.GET.allergic_type == "Allergens_Peanuts" %}selected{% endif %}>Allergens_Peanuts</option>
                            <option value="Allergens_Dairy" {% if request.GET.allergic_type == "Allergens_Dairy" %}selected{% endif %}>Allergens_Dairy</option>
                            <option value="Allergens_Legumes" {% if request.GET.allergic_type == "Allergens_Legumes" %}selected{% endif %}>Allergens_Legumes</option>
                            <option value="Allergens_Depends_on_filling_ingredients" {% if request.GET.allergic_type == "Allergens_Depends_on_filling_ingredients" %}selected{% endif %}>Allergens_Depends_on_filling_ingredients</option>
                            <option value="Allergens_Milk" {% if request.GET.allergic_type == "Allergens_Milk" %}selected{% endif %}>Allergens_Milk</option>
                            <option value="Allergens_Red_meat" {% if request.GET.allergic_type == "Allergens_Red_meat" %}selected{% endif %}>Allergens_Red_meat</option>
                            <option value="Allergens_Tomato" {% if request.GET.allergic_type == "Allergens_Tomato" %}selected{% endif %}>Allergens_Tomato</option>
                            <option value="Allergens_Sea_food" {% if request.GET.allergic_type == "Allergens_Sea_food" %}selected{% endif %}>Allergens_Sea_food</option>
                            <option value="Allergens_Fava" {% if request.GET.allergic_type == "Allergens_Fava" %}selected{% endif %}>Allergens_Fava</option>
                            <option value="Allergens_Coffee" {% if request.GET.allergic_type == "Allergens_Coffee" %}selected{% endif %}>Allergens_Coffee</option>
                        </select>
                    </div>
                    <!-- =============== Other Tags =============== -->
                    <div class="filter-group">
                        <label for="other_tags" class="text-center">سایر تگ ها</label>
                        <select id="other_tags" name="other_tags" class="form-control stylish-input">
                            <option value="" dir="rtl">سایر</option>
                            <option value="cooked_rice" {% if request.GET.other_tags == "cooked_rice" %}selected{% endif %}>cooked_rice</option>
                            <option value="main_dish" {% if request.GET.other_tags == "main_dish" %}selected{% endif %}>main_dish</option>
                            <option value="Dessert" {% if request.GET.other_tags == "Dessert" %}selected{% endif %}>Dessert</option>
                            <option value="Added_Meat" {% if request.GET.other_tags == "Added_Meat" %}selected{% endif %}>Added_Meat</option>
                            <option value="Ing_Main" {% if request.GET.other_tags == "Ing_Main" %}selected{% endif %}>Ing_Main</option>
                            <option value="Beverage" {% if request.GET.other_tags == "Beverage" %}selected{% endif %}>Beverage</option>
                            <option value="Sandwich" {% if request.GET.other_tags == "Sandwich" %}selected{% endif %}>Sandwich</option>
                            <option value="Condiment" {% if request.GET.other_tags == "Condiment" %}selected{% endif %}>Condiment</option>
                            <option value="Lunch" {% if request.GET.other_tags == "Lunch" %}selected{% endif %}>Lunch</option>
                            <option value="Snack" {% if request.GET.other_tags == "Snack" %}selected{% endif %}>Snack</option>
                            <option value="Bread" {% if request.GET.other_tags == "Bread" %}selected{% endif %}>Bread</option>
                            <option value="Entree" {% if request.GET.other_tags == "Entree" %}selected{% endif %}>Entree</option>
                            <option value="Soup" {% if request.GET.other_tags == "Soup" %}selected{% endif %}>Soup</option>
                            <option value="Side_Dish" {% if request.GET.other_tags == "Side_Dish" %}selected{% endif %}>Side_Dish</option>
                            <option value="Appetizer" {% if request.GET.other_tags == "Appetizer" %}selected{% endif %}>Appetizer</option>
                            <option value="Dinner" {% if request.GET.other_tags == "Dinner" %}selected{% endif %}>Dinner</option>
                            <option value="Pasta" {% if request.GET.other_tags == "Pasta" %}selected{% endif %}>Pasta</option>
                            <option value="Breakfast" {% if request.GET.other_tags == "Breakfast" %}selected{% endif %}>Breakfast</option>
                            <option value="Salad" {% if request.GET.other_tags == "Salad" %}selected{% endif %}>Salad</option>
                            <option value="Ingredient" {% if request.GET.other_tags == "Ingredient" %}selected{% endif %}>Ingredient</option>
                            <option value="Vegan" {% if request.GET.other_tags == "Vegan" %}selected{% endif %}>Vegan</option>
                            <option value="Umami" {% if request.GET.other_tags == "Umami" %}selected{% endif %}>Umami</option>
                            <option value="Slow_cooked" {% if request.GET.other_tags == "Slow_cooked" %}selected{% endif %}>Slow_cooked</option>
                            <option value="Spicy" {% if request.GET.other_tags == "Spicy" %}selected{% endif %}>Spicy</option>
                            <option value="Baked" {% if request.GET.other_tags == "Baked" %}selected{% endif %}>Baked</option>
                            <option value="Pickled" {% if request.GET.other_tags == "Pickled" %}selected{% endif %}>Pickled</option>
                            <option value="Low_calorie" {% if request.GET.other_tags == "Low_calorie" %}selected{% endif %}>Low_calorie</option>
                            <option value="Grilled" {% if request.GET.other_tags == "Grilled" %}selected{% endif %}>Grilled</option>
                            <option value="Roasted" {% if request.GET.other_tags == "Roasted" %}selected{% endif %}>Roasted</option>
                            <option value="High_protein" {% if request.GET.other_tags == "High_protein" %}selected{% endif %}>High_protein</option>
                            <option value="Fried" {% if request.GET.other_tags == "Fried" %}selected{% endif %}>Fried</option>
                            <option value="Sweet" {% if request.GET.other_tags == "Sweet" %}selected{% endif %}>Sweet</option>
                            <option value="Salty" {% if request.GET.other_tags == "Salty" %}selected{% endif %}>Salty</option>
                            <option value="Lactose_free" {% if request.GET.other_tags == "Lactose_free" %}selected{% endif %}>Lactose_free</option>
                            <option value="Low_carb" {% if request.GET.other_tags == "Low_carb" %}selected{% endif %}>Low_carb</option>
                            <option value="Cold" {% if request.GET.other_tags == "Cold" %}selected{% endif %}>Cold</option>
                            <option value="Vegetarian" {% if request.GET.other_tags == "Vegetarian" %}selected{% endif %}>Vegetarian</option>
                            <option value="Sour" {% if request.GET.other_tags == "Sour" %}selected{% endif %}>Sour</option>
                            <option value="Sweet_Sour" {% if request.GET.other_tags == "Sweet_Sour" %}selected{% endif %}>Sweet_Sour</option>
                            <option value="Raw" {% if request.GET.other_tags == "Raw" %}selected{% endif %}>Raw</option>
                            <option value="Gluten_free" {% if request.GET.other_tags == "Gluten_free" %}selected{% endif %}>Gluten_free</option>
                            <option value="Boiled" {% if request.GET.other_tags == "Boiled" %}selected{% endif %}>Boiled</option>
                            <option value="Steamed" {% if request.GET.other_tags == "Steamed" %}selected{% endif %}>Steamed</option>
                            <option value="Low_fat" {% if request.GET.other_tags == "Low_fat" %}selected{% endif %}>Low_fat</option>
                            <option value="Prepared_Meals" {% if request.GET.other_tags == "Prepared_Meals" %}selected{% endif %}>Prepared_Meals</option>
                            <option value="Meats" {% if request.GET.other_tags == "Meats" %}selected{% endif %}>Meats</option>
                            <option value="Sweets" {% if request.GET.other_tags == "Sweets" %}selected{% endif %}>Sweets</option>
                            <option value="Beans_and_Lentils" {% if request.GET.other_tags == "Beans_and_Lentils" %}selected{% endif %}>Beans_and_Lentils</option>
                            <option value="Snacks" {% if request.GET.other_tags == "Snacks" %}selected{% endif %}>Snacks</option>
                            <option value="Grains_and_Pasta" {% if request.GET.other_tags == "Grains_and_Pasta" %}selected{% endif %}>Grains_and_Pasta</option>
                            <option value="Nuts_and_Seeds" {% if request.GET.other_tags == "Nuts_and_Seeds" %}selected{% endif %}>Nuts_and_Seeds</option>
                            <option value="Fruits" {% if request.GET.other_tags == "Fruits" %}selected{% endif %}>Fruits</option>
                            <option value="Beverages" {% if request.GET.other_tags == "Beverages" %}selected{% endif %}>Beverages</option>
                            <option value="Fish" {% if request.GET.other_tags == "Fish" %}selected{% endif %}>Fish</option>
                            <option value="Baked_Foods" {% if request.GET.other_tags == "Baked_Foods" %}selected{% endif %}>Baked_Foods</option>
                            <option value="Breakfast_Cereals" {% if request.GET.other_tags == "Breakfast_Cereals" %}selected{% endif %}>Breakfast_Cereals</option>
                            <option value="Vegetables" {% if request.GET.other_tags == "Vegetables" %}selected{% endif %}>Vegetables</option>
                            <option value="Spices_and_Herbs" {% if request.GET.other_tags == "Spices_and_Herbs" %}selected{% endif %}>Spices_and_Herbs</option>
                            <option value="Soups_and_Sauces" {% if request.GET.other_tags == "Soups_and_Sauces" %}selected{% endif %}>Soups_and_Sauces</option>
                            <option value="Dairy_and_Egg_Products" {% if request.GET.other_tags == "Dairy_and_Egg_Products" %}selected{% endif %}>Dairy_and_Egg_Products</option>
                            <option value="Fats_and_Oils" {% if request.GET.other_tags == "Fats_and_Oils" %}selected{% endif %}>Fats_and_Oils</option>
                            <option value="Lactose_Intolerance" {% if request.GET.other_tags == "Lactose_Intolerance" %}selected{% endif %}>Lactose_Intolerance</option>
                            <option value="stones" {% if request.GET.other_tags == "stones" %}selected{% endif %}>stones</option>
                            <option value="reflux" {% if request.GET.other_tags == "reflux" %}selected{% endif %}>reflux</option>
                            <option value="Spices" {% if request.GET.other_tags == "Spices" %}selected{% endif %}>Spices</option>
                            <option value="Seafood" {% if request.GET.other_tags == "Seafood" %}selected{% endif %}>Seafood</option>
                            <option value="Poultry" {% if request.GET.other_tags == "Poultry" %}selected{% endif %}>Poultry</option>
                            <option value="Herbs" {% if request.GET.other_tags == "Herbs" %}selected{% endif %}>Herbs</option>
                            <option value="Processed_Meats" {% if request.GET.other_tags == "Processed_Meats" %}selected{% endif %}>Processed_Meats</option>
                            <option value="Legumes" {% if request.GET.other_tags == "Legumes" %}selected{% endif %}>Legumes</option>
                            <option value="Dairy" {% if request.GET.other_tags == "Dairy" %}selected{% endif %}>Dairy</option>
                            <option value="Nuts" {% if request.GET.other_tags == "Nuts" %}selected{% endif %}>Nuts</option>
                            <option value="Mixed_Dishes" {% if request.GET.other_tags == "Mixed_Dishes" %}selected{% endif %}>Mixed_Dishes</option>
                            <option value="Sauces" {% if request.GET.other_tags == "Sauces" %}selected{% endif %}>Sauces</option>
                            <option value="Oils" {% if request.GET.other_tags == "Oils" %}selected{% endif %}>Oils</option>
                            <option value="Grains" {% if request.GET.other_tags == "Grains" %}selected{% endif %}>Grains</option>
                            <option value="Seeds" {% if request.GET.other_tags == "Seeds" %}selected{% endif %}>Seeds</option>
                            <option value="Pastries" {% if request.GET.other_tags == "Pastries" %}selected{% endif %}>Pastries</option>
                            <option value="Spreads" {% if request.GET.other_tags == "Spreads" %}selected{% endif %}>Spreads</option>
                            <option value="Eggs" {% if request.GET.other_tags == "Eggs" %}selected{% endif %}>Eggs</option>
                            <option value="Prebiotic" {% if request.GET.other_tags == "Prebiotic" %}selected{% endif %}>Prebiotic</option>
                            <option value="Probiotic" {% if request.GET.other_tags == "Probiotic" %}selected{% endif %}>Probiotic</option>
                            <option value="Low_Inflammatory" {% if request.GET.other_tags == "Low_Inflammatory" %}selected{% endif %}>Low_Inflammatory</option>
                            <option value="Diverse" {% if request.GET.other_tags == "Diverse" %}selected{% endif %}>Diverse</option>
                            <option value="Polyphenol_Rich" {% if request.GET.other_tags == "Polyphenol_Rich" %}selected{% endif %}>Polyphenol_Rich</option>
                            <option value="Stews" {% if request.GET.other_tags == "Stews" %}selected{% endif %}>Stews</option>
                            <option value="Mixed_Rice" {% if request.GET.other_tags == "Mixed_Rice" %}selected{% endif %}>Mixed_Rice</option>
                            <option value="Soups_and_Aashes" {% if request.GET.other_tags == "Soups_and_Aashes" %}selected{% endif %}>Soups_and_Aashes</option>
                            <option value="Traditional_Foods" {% if request.GET.other_tags == "Traditional_Foods" %}selected{% endif %}>Traditional_Foods</option>
                            <option value="International_Foods" {% if request.GET.other_tags == "International_Foods" %}selected{% endif %}>International_Foods</option>
                            <option value="Vegetarian_Foods" {% if request.GET.other_tags == "Vegetarian_Foods" %}selected{% endif %}>Vegetarian_Foods</option>
                            <option value="Simple_Dishes" {% if request.GET.other_tags == "Simple_Dishes" %}selected{% endif %}>Simple_Dishes</option>
                            <option value="Main_Salads" {% if request.GET.other_tags == "Main_Salads" %}selected{% endif %}>Main_Salads</option>
                            <option value="Fast_Foods" {% if request.GET.other_tags == "Fast_Foods" %}selected{% endif %}>Fast_Foods</option>
                        </select>
                    </div>

                    <div class="filter-group">
                    <label class="text-center">جستجو بر اساس نام رژیم</label>
                    <input type="text" id="dietNameSearch" name="name_search"
                           dir="rtl"
                           class="form-control stylish-input"
                           value="{{ name_search|default_if_none:'' }}"
                           style="max-width: 300px; margin-bottom:10px;"
                           placeholder="مثال: Tehran - template 1 - Alistipes">

                    </div>
                    <div class="filter-group">
                    <label class="text-center">جستجو بر اساس مقدار کالری</label>
                    <input type="text" id="calorieSearch" name="calorie_search"
                           dir="rtl"
                           class="form-control stylish-input"
                           value="{{ calorie_search|default_if_none:'' }}"
                           style="max-width: 300px;"
                           placeholder="مثال: 1300">
                    </div>
                
                    <div class="filter-group">
                        <label for="lunchStews" class="text-center">تعداد خورشت برای ناهار</label>
                        <input type="text" id="lunchStews" name="lunch_Stews"
                               dir="rtl"
                               class="form-control stylish-input"
                               style="max-width: 300px;"
                               placeholder="مثال: 2">
                    </div>
                    
                    <div class="filter-group">
                        <label for="dinnerStews" class="text-center">تعداد خورشت برای شام</label>
                        <input type="text" id="dinnerStews" name="dinner_Stews"
                               dir="rtl"
                               class="form-control stylish-input"
                               style="max-width: 300px;"
                               placeholder="مثال: 3">
                    </div>
                    <div class="filter-group">
                        <label for="lunchMixedRice" class="text-center">تعداد پلو مخلوط برای ناهار</label>
                        <input type="text" id="lunchMixedRice" name="lunch_Mixed_Rice"
                               dir="rtl"
                               class="form-control stylish-input"
                               style="max-width: 300px;"
                               placeholder="مثال: 2">
                    </div>
                    
                    <div class="filter-group">
                        <label for="dinnerMixedRice" class="text-center">تعداد پلو مخلوط برای شام</label>
                        <input type="text" id="dinnerMixedRice" name="dinner_Mixed_Rice"
                               dir="rtl"
                               class="form-control stylish-input"
                               style="max-width: 300px;"
                               placeholder="مثال: 3">
                    </div>
                  </div>

                <!-- Checkbox: is_user_template -->
                <div class="filter-actions" style="margin-top:15px;">
                    <label>
                        <input type="checkbox" id="is_user_template" name="is_user_template"
                           {% if request.GET.is_user_template %}checked{% endif %}>
                        فقط قالب‌های کاربران
                    </label>

                    <!-- "Apply Filter" button (optional) -->
                    <button type="button" class="btn btn-primary btn-filter" id="applyFiltersBtn">
                        اعمال فیلتر
                    </button>
                    <button type="button" class="filter-reset-btn" id="resetFilters">ریست فیلترها</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Loader / Spinner Container -->
    <div id="loader" style="display:none; text-align:center; margin:20px 0;">
        <!-- Using Bootstrap's spinner -->
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    <div class="template-container">
        <h2 class="titles text-center">رژیم های ذخیره شده</h2>
        <hr>

        <!-- Table -->
        <table class="diet-template-table">
            <thead>
                <tr>
                    <!-- Example: Sortable links using "data-field" approach -->
                    <th><a href="#" class="sortable" data-field="diet_name">نام رژیم</a></th>
                    <th>دستیار مربوطه</th>
                    <th><a href="#" class="sortable" data-field="created_at">تاریخ</a></th>
                    <th><a href="#" class="sortable" data-field="calorie_range">مقدار کالری</a></th>
                    <th>برچسب‌ها</th>
                    <th>دسترسی‌ها</th>
                </tr>
            </thead>
            <tbody id="dietTemplateTableBody">
                {% for template in page_obj %}
                <tr>
                    <td dir="rtl">{{ template.diet_name }}</td>
                    <td dir="rtl">
                        {% if template.creator %}
                            {{ template.creator.get_full_name }}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td dir="rtl">{{ template.created_at|date:"d-m-Y H:i" }}</td>
                    <td>{{ template.calorie_range }}</td>
                    <td>
                        <!-- tag badges exactly as before -->
                        <div class="tag-container">
                            <div class="tag-scrollable">
                                {% if template.akkermansia %}<span class="tag-badge">Akkermansia</span>{% endif %}
                                {% if template.bacteroides %}<span class="tag-badge">Bacteroides</span>{% endif %}
                                {% if template.bifidobacterium %}<span class="tag-badge">Bifidobacterium</span>{% endif %}
                                {% if template.faecalibacterium %}<span class="tag-badge">Faecalibacterium</span>{% endif %}
                                {% if template.alistipes %}<span class="tag-badge">Alistipes</span>{% endif %}
                                {% if template.eubacterium %}<span class="tag-badge">Eubacterium</span>{% endif %}
                                {% if template.lactobacillus %}<span class="tag-badge">Lactobacillus</span>{% endif %}
                                {% if template.blautia %}<span class="tag-badge">blautia</span>{% endif %}
                                {% if template.Bacteria_Acidaminococcus %}<span class="tag-badge">Acidaminococcus</span>{% endif %}
                                {% if template.Bacteria_Lawsonibacter_asaccharolyticus %}<span class="tag-badge">Lawsonibacter Asaccharolyticus</span>{% endif %}
                                {% if template.med %}<span class="tag-badge">Med</span>{% endif %}
                                {% if template.low_gi %}<span class="tag-badge">Low-GI</span>{% endif %}
                                {% if template.fasting %}<span class="tag-badge">Fasting</span>{% endif %}
                                {% if template.keto %}<span class="tag-badge">Keto</span>{% endif %}
                                {% if template.mind %}<span class="tag-badge">Mind</span>{% endif %}
                                {% if template.sport %}<span class="tag-badge">Sport</span>{% endif %}
                                {% if template.liquid_or_pureed_diet %}<span class="tag-badge">Liquid</span>{% endif %}
                                {% if template.eliminate_diet %}<span class="tag-badge">Eliminate</span>{% endif %}
                                {% if template.low_fodmap %}<span class="tag-badge">Low Fodmap</span>{% endif %}
                                {% if template.pregnant %}<span class="tag-badge">pregnant</span>{% endif %}
                                {% if template.lactating %}<span class="tag-badge">lactating</span>{% endif %}
                                {% if template.fatty_liver %}<span class="tag-badge">Fatty liver</span>{% endif %}
                                {% if template.diabetes %}<span class="tag-badge">Diabetes</span>{% endif %}
                                {% if template.ibs %}<span class="tag-badge">IBS</span>{% endif %}
                                {% if template.pcos %}<span class="tag-badge">PCOS</span>{% endif %}
                                {% if template.neghres %}<span class="tag-badge">Neghres</span>{% endif %}
                                {% if template.ms %}<span class="tag-badge">MS</span>{% endif %}
                                {% if template.obesity_surgery %}<span class="tag-badge">Obesity surgery</span>{% endif %}
                                {% if template.renal %}<span class="tag-badge">Renal</span>{% endif %}
                                {% if template.cvd %}<span class="tag-badge">CVD</span>{% endif %}
                                {% if template.migraine %}<span class="tag-badge">Migraine</span>{% endif %}
                                {% if template.cancer %}<span class="tag-badge">Cancer</span>{% endif %}
                                {% if template.nervous_disease %}<span class="tag-badge">Nervous disease</span>{% endif %}
                                {% if template.gi_disease %}<span class="tag-badge">GI Disease</span>{% endif %}
                                {% if template.healthy %}<span class="tag-badge">Healthy</span>{% endif %}
                                {% if template.Diet_Low_Sugar %}<span class="tag-badge">Diet_Low_Sugar</span>{% endif %}
                                {% if template.Diet_High_Protein %}<span class="tag-badge">Diet_High_Protein</span>{% endif %}
                                {% if template.Whole_Foods %}<span class="tag-badge">Whole_Foods</span>{% endif %}
                                {% if template.Diet_Low_Fat %}<span class="tag-badge">Diet_Low_Fat</span>{% endif %}
                                {% if template.Diet_Low_Calorie %}<span class="tag-badge">Diet_Low_Calorie</span>{% endif %}
                                {% if template.Diet_Anti_Inflammatory %}<span class="tag-badge">Diet_Anti_Inflammatory</span>{% endif %}
                                {% if template.Diet_Paleo %}<span class="tag-badge">Diet_Paleo</span>{% endif %}
                                {% if template.Diet_Diabetic %}<span class="tag-badge">Diet_Diabetic</span>{% endif %}
                                {% if template.Diet_Low_Carb %}<span class="tag-badge">Diet_Low_Carb</span>{% endif %}
                                {% if template.Diet_Bodybuilding %}<span class="tag-badge">Diet_Bodybuilding</span>{% endif %}
                                {% if template.Diet_Vegan %}<span class="tag-badge">Diet_Vegan</span>{% endif %}
                                {% if template.Diet_Vegetarian %}<span class="tag-badge">Diet_Vegetarian</span>{% endif %}
                                {% if template.Diet_Plant_Based %}<span class="tag-badge">Diet_Plant_Based</span>{% endif %}
                                {% if template.Diet_Gluten_Free %}<span class="tag-badge">Diet_Gluten_Free</span>{% endif %}
                                {% if template.Disease_Kidney %}<span class="tag-badge">Disease_Kidney</span>{% endif %}
                                {% if template.Disease_Kidney_stones %}<span class="tag-badge">Disease_Kidney_stones</span>{% endif %}
                                {% if template.Disease_Acid_reflux %}<span class="tag-badge">Disease_Acid_reflux</span>{% endif %}
                                {% if template.Disease_Celiac %}<span class="tag-badge">Disease_Celiac</span>{% endif %}
                                {% if template.Disease_Diverticulitis %}<span class="tag-badge">Disease_Diverticulitis</span>{% endif %}
                                {% if template.Disease_Hypothyroidism %}<span class="tag-badge">Disease_Hypothyroidism</span>{% endif %}
                                {% if template.Disease_Gastroesophageal_Reflux %}<span class="tag-badge">Disease_Gastroesophageal_Reflux</span>{% endif %}
                                {% if template.Disease_Foodborne_Illness %}<span class="tag-badge">Disease_Foodborne_Illness</span>{% endif %}
                                {% if template.Disease_High_blood_pressure %}<span class="tag-badge">Disease_High_blood_pressure</span>{% endif %}
                                {% if template.Disease_High_cholesterol %}<span class="tag-badge">Disease_High_cholesterol</span>{% endif %}
                                {% if template.Disease_Hypercholesterolemia %}<span class="tag-badge">Disease_Hypercholesterolemia</span>{% endif %}
                                {% if template.Disease_G6PD_Deficiency %}<span class="tag-badge">Disease_G6PD_Deficiency</span>{% endif %}
                                {% if template.Disease_Constipation %}<span class="tag-badge">Disease_Constipation</span>{% endif %}
                                {% if template.Disease_Gallbladder %}<span class="tag-badge">Disease_Gallbladder</span>{% endif %}
                                {% if template.Disease_Latex_Fruit_Syndrome %}<span class="tag-badge">Disease_Latex_Fruit_Syndrome</span>{% endif %}
                                {% if template.Disease_Obesity %}<span class="tag-badge">Disease_Obesity</span>{% endif %}
                                {% if template.Disease_Diarrhea %}<span class="tag-badge">Disease_Diarrhea</span>{% endif %}
                                {% if template.Disease_Cyst %}<span class="tag-badge">Disease_Cyst</span>{% endif %}
                                {% if template.cooked_rice %}<span class="tag-badge">cooked_rice</span>{% endif %}
                                {% if template.main_dish %}<span class="tag-badge">main_dish</span>{% endif %}
                                {% if template.Allergens_Peanut %}<span class="tag-badge">Allergens_Peanut</span>{% endif %}
                                {% if template.Allergens_Wheat %}<span class="tag-badge">Allergens_Wheat</span>{% endif %}
                                {% if template.Allergens_Shrimp %}<span class="tag-badge">Allergens_Shrimp</span>{% endif %}
                                {% if template.Allergens_Mushroom %}<span class="tag-badge">Allergens_Mushroom</span>{% endif %}
                                {% if template.Allergens_Eggplant %}<span class="tag-badge">Allergens_Eggplant</span>{% endif %}
                                {% if template.Allergens_Dried_fruits %}<span class="tag-badge">Allergens_Dried_fruits</span>{% endif %}
                                {% if template.Allergens_Gluten %}<span class="tag-badge">Allergens_Gluten</span>{% endif %}
                                {% if template.Allergens_Fish %}<span class="tag-badge">Allergens_Fish</span>{% endif %}
                                {% if template.Allergens_Sesame %}<span class="tag-badge">Allergens_Sesame</span>{% endif %}
                                {% if template.Allergens_Shellfish %}<span class="tag-badge">Allergens_Shellfish</span>{% endif %}
                                {% if template.Allergens_Nuts %}<span class="tag-badge">Allergens_Nuts</span>{% endif %}
                                {% if template.Allergens_Soy %}<span class="tag-badge">Allergens_Soy</span>{% endif %}
                                {% if template.Allergens_Eggs %}<span class="tag-badge">Allergens_Eggs</span>{% endif %}
                                {% if template.Allergens_Peanuts %}<span class="tag-badge">Allergens_Peanuts</span>{% endif %}
                                {% if template.Allergens_Dairy %}<span class="tag-badge">Allergens_Dairy</span>{% endif %}
                                {% if template.Allergens_Legumes %}<span class="tag-badge">Allergens_Legumes</span>{% endif %}
                                {% if template.Allergens_Depends_on_filling_ingredients %}<span class="tag-badge">Allergens_Depends_on_filling_ingredients</span>{% endif %}
                                {% if template.Allergens_Milk %}<span class="tag-badge">Allergens_Milk</span>{% endif %}
                                {% if template.Allergens_Red_meat %}<span class="tag-badge">Allergens_Red_meat</span>{% endif %}
                                {% if template.Allergens_Tomato %}<span class="tag-badge">Allergens_Tomato</span>{% endif %}
                                {% if template.Allergens_Sea_food %}<span class="tag-badge">Allergens_Sea_food</span>{% endif %}
                                {% if template.Allergens_Fava %}<span class="tag-badge">Allergens_Fava</span>{% endif %}
                                {% if template.Allergens_Coffee %}<span class="tag-badge">Allergens_Coffee</span>{% endif %}
                                {% if template.Dessert %}<span class="tag-badge">Dessert</span>{% endif %}
                                {% if template.Added_Meat %}<span class="tag-badge">Added_Meat</span>{% endif %}
                                {% if template.Ing_Main %}<span class="tag-badge">Ing_Main</span>{% endif %}
                                {% if template.Beverage %}<span class="tag-badge">Beverage</span>{% endif %}
                                {% if template.Sandwich %}<span class="tag-badge">Sandwich</span>{% endif %}
                                {% if template.Condiment %}<span class="tag-badge">Condiment</span>{% endif %}
                                {% if template.Lunch %}<span class="tag-badge">Lunch</span>{% endif %}
                                {% if template.Snack %}<span class="tag-badge">Snack</span>{% endif %}
                                {% if template.Bread %}<span class="tag-badge">Bread</span>{% endif %}
                                {% if template.Entree %}<span class="tag-badge">Entree</span>{% endif %}
                                {% if template.Soup %}<span class="tag-badge">Soup</span>{% endif %}
                                {% if template.Side_Dish %}<span class="tag-badge">Side_Dish</span>{% endif %}
                                {% if template.Appetizer %}<span class="tag-badge">Appetizer</span>{% endif %}
                                {% if template.Dinner %}<span class="tag-badge">Dinner</span>{% endif %}
                                {% if template.Pasta %}<span class="tag-badge">Pasta</span>{% endif %}
                                {% if template.Breakfast %}<span class="tag-badge">Breakfast</span>{% endif %}
                                {% if template.Salad %}<span class="tag-badge">Salad</span>{% endif %}
                                {% if template.Ingredient %}<span class="tag-badge">Ingredient</span>{% endif %}
                                {% if template.Vegan %}<span class="tag-badge">Vegan</span>{% endif %}
                                {% if template.Umami %}<span class="tag-badge">Umami</span>{% endif %}
                                {% if template.Slow_cooked %}<span class="tag-badge">Slow_cooked</span>{% endif %}
                                {% if template.Spicy %}<span class="tag-badge">Spicy</span>{% endif %}
                                {% if template.Baked %}<span class="tag-badge">Baked</span>{% endif %}
                                {% if template.Pickled %}<span class="tag-badge">Pickled</span>{% endif %}
                                {% if template.Low_calorie %}<span class="tag-badge">Low_calorie</span>{% endif %}
                                {% if template.Grilled %}<span class="tag-badge">Grilled</span>{% endif %}
                                {% if template.Roasted %}<span class="tag-badge">Roasted</span>{% endif %}
                                {% if template.High_protein %}<span class="tag-badge">High_protein</span>{% endif %}
                                {% if template.Fried %}<span class="tag-badge">Fried</span>{% endif %}
                                {% if template.Sweet %}<span class="tag-badge">Sweet</span>{% endif %}
                                {% if template.Salty %}<span class="tag-badge">Salty</span>{% endif %}
                                {% if template.Lactose_free %}<span class="tag-badge">Lactose_free</span>{% endif %}
                                {% if template.Low_carb %}<span class="tag-badge">Low_carb</span>{% endif %}
                                {% if template.Cold %}<span class="tag-badge">Cold</span>{% endif %}
                                {% if template.Vegetarian %}<span class="tag-badge">Vegetarian</span>{% endif %}
                                {% if template.Sour %}<span class="tag-badge">Sour</span>{% endif %}
                                {% if template.Sweet_Sour %}<span class="tag-badge">Sweet_Sour</span>{% endif %}
                                {% if template.Raw %}<span class="tag-badge">Raw</span>{% endif %}
                                {% if template.Gluten_free %}<span class="tag-badge">Gluten_free</span>{% endif %}
                                {% if template.Boiled %}<span class="tag-badge">Boiled</span>{% endif %}
                                {% if template.Steamed %}<span class="tag-badge">Steamed</span>{% endif %}
                                {% if template.Low_fat %}<span class="tag-badge">Low_fat</span>{% endif %}
                                {% if template.Prepared_Meals %}<span class="tag-badge">Prepared_Meals</span>{% endif %}
                                {% if template.Meats %}<span class="tag-badge">Meats</span>{% endif %}
                                {% if template.Sweets %}<span class="tag-badge">Sweets</span>{% endif %}
                                {% if template.Beans_and_Lentils %}<span class="tag-badge">Beans_and_Lentils</span>{% endif %}
                                {% if template.Snacks %}<span class="tag-badge">Snacks</span>{% endif %}
                                {% if template.Grains_and_Pasta %}<span class="tag-badge">Grains_and_Pasta</span>{% endif %}
                                {% if template.Nuts_and_Seeds %}<span class="tag-badge">Nuts_and_Seeds</span>{% endif %}
                                {% if template.Fruits %}<span class="tag-badge">Fruits</span>{% endif %}
                                {% if template.Beverages %}<span class="tag-badge">Beverages</span>{% endif %}
                                {% if template.Fish %}<span class="tag-badge">Fish</span>{% endif %}
                                {% if template.Baked_Foods %}<span class="tag-badge">Baked_Foods</span>{% endif %}
                                {% if template.Breakfast_Cereals %}<span class="tag-badge">Breakfast_Cereals</span>{% endif %}
                                {% if template.Vegetables %}<span class="tag-badge">Vegetables</span>{% endif %}
                                {% if template.Spices_and_Herbs %}<span class="tag-badge">Spices_and_Herbs</span>{% endif %}
                                {% if template.Soups_and_Sauces %}<span class="tag-badge">Soups_and_Sauces</span>{% endif %}
                                {% if template.Dairy_and_Egg_Products %}<span class="tag-badge">Dairy_and_Egg_Products</span>{% endif %}
                                {% if template.Fats_and_Oils %}<span class="tag-badge">Fats_and_Oils</span>{% endif %}
                                {% if template.Lactose_Intolerance %}<span class="tag-badge">Lactose_Intolerance</span>{% endif %}
                                {% if template.stones %}<span class="tag-badge">stones</span>{% endif %}
                                {% if template.reflux %}<span class="tag-badge">reflux</span>{% endif %}
                                {% if template.Spices %}<span class="tag-badge">Spices</span>{% endif %}
                                {% if template.Seafood %}<span class="tag-badge">Seafood</span>{% endif %}
                                {% if template.Poultry %}<span class="tag-badge">Poultry</span>{% endif %}
                                {% if template.Herbs %}<span class="tag-badge">Herbs</span>{% endif %}
                                {% if template.Processed_Meats %}<span class="tag-badge">Processed_Meats</span>{% endif %}
                                {% if template.Legumes %}<span class="tag-badge">Legumes</span>{% endif %}
                                {% if template.Dairy %}<span class="tag-badge">Dairy</span>{% endif %}
                                {% if template.Nuts %}<span class="tag-badge">Nuts</span>{% endif %}
                                {% if template.Mixed_Dishes %}<span class="tag-badge">Mixed_Dishes</span>{% endif %}
                                {% if template.Sauces %}<span class="tag-badge">Sauces</span>{% endif %}
                                {% if template.Oils %}<span class="tag-badge">Oils</span>{% endif %}
                                {% if template.Grains %}<span class="tag-badge">Grains</span>{% endif %}
                                {% if template.Seeds %}<span class="tag-badge">Seeds</span>{% endif %}
                                {% if template.Pastries %}<span class="tag-badge">Pastries</span>{% endif %}
                                {% if template.Spreads %}<span class="tag-badge">Spreads</span>{% endif %}
                                {% if template.Eggs %}<span class="tag-badge">Eggs</span>{% endif %}
                                {% if template.Prebiotic %}<span class="tag-badge">Prebiotic</span>{% endif %}
                                {% if template.Probiotic %}<span class="tag-badge">Probiotic</span>{% endif %}
                                {% if template.Low_Inflammatory %}<span class="tag-badge">Low_Inflammatory</span>{% endif %}
                                {% if template.Diverse %}<span class="tag-badge">Diverse</span>{% endif %}
                                {% if template.Polyphenol_Rich %}<span class="tag-badge">Polyphenol_Rich</span>{% endif %}
                                {% if template.Stews %}<span class="tag-badge">Stews</span>{% endif %}
                                {% if template.Mixed_Rice %}<span class="tag-badge">Mixed_Rice</span>{% endif %}
                                {% if template.Soups_and_Aashes %}<span class="tag-badge">Soups_and_Aashes</span>{% endif %}
                                {% if template.Traditional_Foods %}<span class="tag-badge">Traditional_Foods</span>{% endif %}
                                {% if template.International_Foods %}<span class="tag-badge">International_Foods</span>{% endif %}
                                {% if template.Vegetarian_Foods %}<span class="tag-badge">Vegetarian_Foods</span>{% endif %}
                                {% if template.Simple_Dishes %}<span class="tag-badge">Simple_Dishes</span>{% endif %}
                                {% if template.Main_Salads %}<span class="tag-badge">Main_Salads</span>{% endif %}
                                {% if template.Fast_Foods %}<span class="tag-badge">Fast_Foods</span>{% endif %}
                            </div>
                        </div>
                    </td>
                    <td>
                        <button class="btn-edit" onclick="editTemplate('{{ template.id }}')">تغییر نام</button>
                        <button class="btn-delete" onclick="deleteTemplate('{{ template.id }}')">حذف</button>
                        <button class="action-btn" onclick="loadTemplate('{{ template.id }}')">بارگذاری</button>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" class="text-center">هیچ رژیمی یافت نشد. لطفاً از فیلترها استفاده کنید</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- PAGINATION -->
        <div class="pagination-container text-center" style="margin-top:15px;">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    <!-- Example pagination snippet in your template -->
                    {% if page_obj.has_previous %}
                        <!-- First Page -->
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
                                &laquo;&laquo;
                            </a>
                        </li>

                        <!-- Previous Page -->
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
                                &laquo;
                            </a>
                        </li>
                    {% endif %}

                    <!-- Page Numbers -->
                    {% for page_num in page_obj.paginator.page_range %}
                        {% if page_num == page_obj.number %}
                            <li class="page-item active">
                                <span class="page-link">{{ page_num }}</span>
                            </li>
                        {% elif page_num >= page_obj.number|add:'-2' and page_num <= page_obj.number|add:'2' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
                                    {{ page_num }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <!-- Next Page -->
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
                                &raquo;
                            </a>
                        </li>

                        <!-- Last Page -->
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}">
                                &raquo;&raquo;
                            </a>
                        </li>
                    {% endif %}

                </ul>
            </nav>
        </div>
    </div>

    <style>
        .filter-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .filter-reset-btn {
            background-color: #f44336; /* Red */
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

        .filter-reset-btn:hover {
            background-color: #d32f2f; /* Darker red */
        }
        .diet-template-table {
            width: 100%;
            border-collapse: collapse;
        }
        .diet-template-table th, .diet-template-table td {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        .diet-template-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .diet-template-table tr:hover {
            background-color: #f5f5f5;
        }
        .action-btn {
            background-color: #009A6E; /* Blue color, you can customize */
            /*border-color: #009A6E;*/
            color: white; /* Text color */
            padding: 5px 10px;
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
            margin-left: 10px;
            border: none;
        }
        .action-btn:hover {
            background-color: #007b5650; /* Darker shade of blue */
            color: #007b56; /* Text color on hover */
            border: none;
            cursor: pointer;
        }
        .content {
            margin: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Filter container styling */
        .filter-container {
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            width: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .template-container {
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            width: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        /* Filter header */
        .filter-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            color: #333;
        }

        /* Filters grid layout */
        .filters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 15px;
        }

        /* Individual filter group */
        .filter-group {
            display: flex;
            flex-direction: column;
        }

        .filter-group label {
            font-size: 14px;
            color: #555;
            margin-bottom: 5px;
        }

        /* Filter inputs */
        .stylish-input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            outline: none;
            transition: border-color 0.3s;
        }

        .stylish-input:focus {
            border-color: #007bff;
        }

        /* Filter actions */
        .filter-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .filter-submit-btn {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .filter-submit-btn:hover {
            background-color: #0056b3;
        }

        /* Checkbox styling */
        input[type="checkbox"] {
            margin-right: 5px;
        }

        label {
            font-size: 14px;
            color: #333;
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .filter-container {
                max-width: 100%;
                padding: 15px;
            }
        }

        .titles {
            text-align: right;
            font-size: 24px;
            margin-bottom: 10px;
            font-family: 'IranSansWeb', sans-serif;
            color: #009A6E;
        }
        .tag-badge {
            background-color: #FF9900;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            margin: 5px; /* Space between tags */
            display: inline-block; /* Ensure they behave like inline elements */
        }

        .tag-container {
            display: flex;
            justify-content: center; /* Center the tags horizontally */
            align-items: center; /* Align the tags vertically in the center */
            flex-wrap: wrap; /* Ensure the tags wrap to the next line if there are too many */
            gap: 10px; /* Space between the tags */
            max-width: 700px; /* Optional: set a maximum width */
            margin: 0 auto; /* Ensure the container itself is centered */
        }

        /* Styling for the search inputs */
        .column-search {
            width: 80%;
            margin: 5px;
            padding: 5px;
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        .column-search:focus {
            outline: none;
            border-color: #009A6E; /* Use your primary color for focus */
            box-shadow: 0 0 5px rgba(0, 154, 110, 0.5); /* Optional shadow for focus */
        }

        .btn-edit {
            background-color: #009A6E25; /* Blue color, you can customize */
            /*border-color: #009A6E;*/
            color: #009A6E; /* Text color */
            padding: 5px 10px;
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
            margin-left: 10px;
            border: none;
        }
        .btn-delete {
            background-color: #ee4f3d25; /* Blue color, you can customize */
            padding: 5px 10px;
            color: red; /* Text color */
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
            margin-left: 10px;
            border: none;
        }
        .btn-edit:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
            cursor: pointer;
        }
        .btn-delete:hover {
            background-color: red; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
            border: none;
            cursor: pointer;
        }

    </style>

{% endblock %}

{% block script %}
    <script src="{% static 'panel/assistant' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/assistant' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
    <!-- Include DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <!-- Include DataTables JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

    <script>
    window.CSRF_TOKEN = "{{ csrf_token }}";

    // Prevent form submission on Enter
    document.getElementById('filterForm').addEventListener('submit', function(e) {
        e.preventDefault(); // Block default submission
    });

    // Mapping between query parameter names and input element IDs.
    // Note: The name attribute used in the GET parameters remains unchanged,
    // but we read values from the input element IDs as they are defined in your HTML.
    function buildQueryString() {
        let params = [];
        const mapping = {
            'company_name': 'company',              // if the select element for company has id "company"
            'city': 'city',                         // if the select for city has id "city"
            'bacteria_type': 'bacteria_type',       // if the select for bacteria_type has id "bacteria_type"
            'diet_type': 'diet_type',               // if the select for diet_type has id "diet_type"
            'diseases_type': 'diseases_type',       // if the select for diseases_type has id "diseases_type"
            'allergic_type': 'allergic_type',       // if the select for AllergicType has id "AllergicType"
            'other_tags': 'other_tags',             // if the select for other_tags has id "other_tags"
            'name_search': 'dietNameSearch',        // your input for diet name search (name_search) has id "dietNameSearch"
            'calorie_search': 'calorieSearch',      // your input for calorie search (calorie_search) has id "calorieSearch"
            'lunch_Stews': 'lunchStews',            // adjust these IDs to match your HTML if needed
            'dinner_Stews': 'dinnerStews',
            'lunch_Mixed_Rice': 'lunchMixedRice',
            'dinner_Mixed_Rice': 'dinnerMixedRice'
        };

        Object.entries(mapping).forEach(([param, elementId]) => {
            let val = $('#' + elementId).val();
            if (val) {
                params.push(param + '=' + encodeURIComponent(val.trim()));
            }
        });

        if ($('#is_user_template').is(':checked')) {
            params.push('is_user_template=true');
        }
        // Sorting parameters (assuming these variables are defined)
        params.push('sort_field=' + encodeURIComponent(currentSortField));
        params.push('sort_order=' + encodeURIComponent(currentSortOrder));
        return params.join('&');
    }
    
    // Show loader before starting AJAX call
    function showLoader() {
        $('#loader').show();
    }
    // Hide loader after AJAX call finishes
    function hideLoader() {
        $('#loader').hide();
    }

    // Use the filter button to trigger the AJAX load.
    $('#applyFiltersBtn').on('click', function() {
        let qs = buildQueryString();
        fetchTemplates(qs);
    });

    // Remove any on-change (keyup) events for the search inputs so that filtering only happens when the button is clicked.
    // (Make sure you have removed any keyup listeners from your code.)

    // Reset button: Clear all filters and fetch the default view.
    $('#resetFilters').on('click', function() {
        $('#filterForm')[0].reset();
        history.pushState({}, '', window.location.pathname);
        fetchTemplates('');
    });

    function fetchTemplates(params) {
        showLoader(); // Show the spinner before sending request
        $.ajax({
            url: window.location.pathname + (params ? '?' + params : ''),
            type: 'GET',
            success: function(response) {
                const parser = new DOMParser();
                const doc = parser.parseFromString(response, 'text/html');

                const newTbody = doc.querySelector('#dietTemplateTableBody');
                if (newTbody) {
                    $('#dietTemplateTableBody').html(newTbody.innerHTML);
                }
                const newPagination = doc.querySelector('.pagination-container');
                if (newPagination) {
                    $('.pagination-container').html(newPagination.innerHTML);
                }
            },
            error: function() {
                console.error("Error loading templates via AJAX");
            },
            complete: function() {
                hideLoader(); // Hide the spinner after request completes
            }
        });
    }

    // Sorting functionality
    let currentSortField = '{{ sort_field|default:"created_at" }}';
    let currentSortOrder = '{{ sort_order|default:"desc" }}';
    $('.sortable').on('click', function(e) {
        e.preventDefault();
        let field = $(this).data('field');
        let newOrder = 'asc';
        if (field === currentSortField) {
            newOrder = (currentSortOrder === 'asc') ? 'desc' : 'asc';
        }
        currentSortField = field;
        currentSortOrder = newOrder;
        let qs = buildQueryString();
        fetchTemplates(qs);
    });

    // Functions loadTemplate, editTemplate, deleteTemplate remain unchanged.
    function loadTemplate(templateId) {
        console.log('Loading template ID:', templateId);
        $.ajax({
            url: `/panel/assistant/get/diet/template/${templateId}/`,
            type: 'GET',
            contentType: 'application/json',
            headers: { 'X-CSRFToken': window.CSRF_TOKEN },
            success: function(template) {
                sessionStorage.setItem('selectedTemplate', JSON.stringify(template));
                const patientId = sessionStorage.getItem('patientId');
                if (patientId) {
                    window.location.href = `/panel/assistant/diets/${patientId}/`;
                } else {
                    console.error('Patient ID is missing in sessionStorage.');
                }
            },
            error: function() {
                alert('Error loading the diet template.');
            }
        });
    }

    function editTemplate(templateId) {
        const newDietName = prompt('نام جدید رژیم را وارد کنید:');
        if (newDietName && newDietName.trim()) {
            $.ajax({
                url: `/panel/assistant/edit/diet/template/${templateId}/`,
                type: 'POST',
                contentType: 'application/json',
                headers: { 'X-CSRFToken': window.CSRF_TOKEN },
                data: JSON.stringify({ diet_name: newDietName }),
                success: function() {
                    alert('Diet template name updated successfully!');
                    window.location.reload();
                },
                error: function() {
                    alert('Error updating the diet template name.');
                }
            });
        }
    }

    function deleteTemplate(templateId) {
        if (confirm('آیا از حذف این رژیم مطمئن هستید؟')) {
            $.ajax({
                url: `/panel/assistant/delete/diet/template/${templateId}/`,
                type: 'DELETE',
                contentType: 'application/json',
                headers: { 'X-CSRFToken': window.CSRF_TOKEN },
                success: function() {
                    alert('Diet template deleted successfully!');
                    window.location.reload();
                },
                error: function() {
                    alert('Error deleting the diet template.');
                }
            });
        }
    }
</script>

{% endblock %}