122 lines
6.1 KiB
HTML
122 lines
6.1 KiB
HTML
{% extends "layout/layout.html" %}
|
|
{% from "paginator/paginator.html" import paginator %}
|
|
{% block title %} Pets {% 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">
|
|
{% include 'message.html' %}
|
|
</div>
|
|
<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
|
|
{%if pet.adoption != none and pet.adoption.status.name != 'rejected' %}
|
|
{{'fliping-card__side--front-adopted'}}
|
|
{% endif %}
|
|
">
|
|
<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>
|
|
{%if pet.adoption != none and pet.adoption.status.name != 'rejected' %}
|
|
<li>This pet is currently in an adoption process.</li>
|
|
{% else %}
|
|
<li><a href="{% if session['id'] %} {{'/pets/adopt?id=' ~ pet.id}} {% else %} {{'/users/login'}}{% endif %}">Ask for adoption!</a></li>
|
|
{% endif %}
|
|
</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 %} |