{% extends "layout/layout.html" %}
{% from "paginator/paginator.html" import paginator %}
{% block title %} Home {% endblock %}
{% block head %} 
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/pets.css') }}">
{% endblock %} 
{% block content %}
<div class="pets container">
    <div class="row px-2">
        <div class="card py-4 mb-3 mb-md-0 mt-4">
            <div class="col-12">
                <form method="get" id="filters">
                    <div class="row">
                        <div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
                            <select aria-label="type select field" class="form-select" name="type">
                                {% for option in options['type'] %}
                                    <option 
                                        {% if loop.index0 == 0 %} {{"disabled"}} {% endif %}
                                        value="{{option['value']}}" 
                                        {%if option['selected'] %} {{"selected"}} {% endif %}
                                    >{{option['text']}}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
                            <select aria-label="sex select field" class="form-select" name="sex">
                                {% for option in options['sex'] %}
                                    <option 
                                        {% if loop.index0 == 0 %} {{"disabled"}} {% endif %}
                                        value="{{option['value']}}" 
                                        {%if option['selected'] %} {{"selected"}} {% endif %}
                                    >{{option['text']}}</option>
                                {% endfor %}
                                </select>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-0">
                            <div class="input-group">
                                <span class="input-group-text">From</span>
                                <select 
                                    aria-label="from years select field"
                                    class="form-select"
                                    id="from-years-filter"
                                    name="age-from"
                                >
                                    {% for option in options["age_from"] %}
                                        <option 
                                            value="{{option['value']}}" 
                                            {%if option['selected'] %} {{"selected"}} {% endif %}
                                        >{{option['text']}}</option>
                                    {% endfor %}
                                </select>
                                <span class="input-group-text" id="to-text">to</span>
                                <select 
                                    aria-label="years to select field" 
                                    class="form-select" 
                                    id="to-years-filter" 
                                    name="age-to"
                                >
                                    <option value="7" default>7+</option>
                                </select>
                                <span class="input-group-text">yrs old</span>
                            </div>
                        </div>
                        <div class="col-12 col-md-12 col-lg-2">
                            <button class="btn btn-outline-primary w-100" type="submit">Filter</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row justify-content-start">
        {% for pet in pagination_result.items %}
            <div class="col-6 col-sm-4 col-md-4 col-lg-3 mt-3 mt-md-5">
                <div class="fliping-card img-fluid mx-auto">
                    <div class="fliping-card__side fliping-card__side--front">
                        <img alt="pet" width="200" height="200" src="{{ pet.img_src }}" class="img-fluid">
                    </div>
                    <div class="fliping-card__side fliping-card__side--back 
                    {%if pet.sex == 'M' %}
                    {{'fliping-card__side--back-male'}}
                    {% else %}
                    {{'fliping-card__side--back-female'}}
                    {% endif %}"
                    >
                        <ul class="list-unstyled text-center mt-3">
                            <li>Name: {{pet.name}}</li>
                            <li>Age: {{pet.age}}, Sex: {{pet.sex}}</li>
                            <li>W: {{pet.weight}}lbs., H: {{pet.height}}ft.</li>
                            <li>Location: {{pet.location}}</li>
                            <li>Ask for adoption!</li>
                        </ul>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="row justify-content-center">
        {{  
            paginator(pagination_result.page,
            pagination_result.pages,
            pagination_result.has_prev,
            pagination_result.has_next,
            pagination_result.prev_num,
            pagination_result.next_num )
        }}
    </div>
</div>
<script src="{{ url_for('static', filename='js/pets-filter.js') }}"></script>
{% endblock %}