{% extends 'base.html' %}
{% load thumbnail %}

{% block title %}Recherche{% endblock %}

{% block extrahead %}
<style>
ul.results { list-style-type: none; padding: 0; }
ul.results li { margin: 0; padding: 2px; }
ul.results li, ul.results li * { vertical-align: middle; }
ul.results li:nth-child(odd) { background-color: #eee; }
input#id_text { padding: 10px 0; }
form#search-form p { display: inline-block; margin-right: 1em; }
</style>
{% endblock %}

{% block content %}
<h1>Recettes</h1>

<form id="search-form" method="POST">{% csrf_token %}
    {{ form.as_p }}
    <div><button>Rechercher</button></div>
</form>

{% if num_results is not None %}
<div class="results">{{ num_results }} résultat(s)</div>
{% endif %}
<ul class="results">
{% for recette in recettes %}
    <li>
        <a href="{{ recette.get_absolute_url }}">{{ recette.nom }}</a>
        <img src="{{ recette.photo|thumbnail_url:'thumbnail' }}">
    </li>
{% endfor %}
</ul>
{% endblock %}