{% extends "layout/layout.html" %} 
{% block title %} Home {% endblock %}
{% block head %} 
  {{ super() }}
{% endblock %} 
{% block content %}
<div class="pets container">
    <div class="row px-2">
        <div class="card py-4 my-4">
            <div class="col-12">
                <form action="" method="get">
                    <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">
        <h1>This is pets!</h1>
    </div>
</div>
<script src="{{ url_for('static', filename='js/pets-filter.js') }}"></script>
{% endblock %}