{% extends "base_beer.html" %}
{% load i18n static %}

{% block title %}Sandwitches{% endblock %}

{% block extra_head %}
{{ block.super }}
<style>
    @media only screen and (min-width: 992px) {
        main.container {
            padding-left: 10%;
            padding-right: 10%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="large-space"></div>

<article class="round secondary s12 m12 l12">
  <div class="row align-center">
    <div class="max">
      <h4 class="upper">{% trans 'Sandwitches' %}</h4>
      <p class="large-text">{% trans 'Sandwiches so good, they haunt you!' %}</p>
    </div>
  </div>
</article>

<div class="space"></div>

{% include "components/search_form.html" %}

{% if highlighted_recipes %}
<div class="large-space"></div>
<h4 class="upper center-align">{% trans 'Highlights' %}</h4>
<div class="small-space"></div>
<div class="relative">
    <div class="row scroll snap no-scrollbar large-padding" id="highlighted-carousel" style="gap: 20px; flex-wrap: nowrap;">
        {% for recipe in highlighted_recipes %}
        <a href="{{ recipe.get_absolute_url }}">
        <article class="round no-padding elevate tertiary-container" style="min-width: 300px; width: 300px; flex-shrink: 0; scroll-snap-align: start;">
                {% if recipe.image %}
                <img src="{{ recipe.image_medium.url }}" class="responsive top-round" alt="{{ recipe.title }}" style="height: 200px; object-fit: cover;">
                {% else %}
                <div class="primary medium-height top-round middle-align center-align" style="height:200px;">
                    <i class="extra">lunch_dining</i>
                </div>
                {% endif %}
            <div class="padding">
                <h5>{{ recipe.title }}</h5>
            </div>
        </article>
        </a>
        {% endfor %}
    </div>
    <button class="circle surface absolute left middle-align elevate" onclick="scrollCarousel(-1)" style="top: 50%; transform: translateY(-50%); left: -20px; z-index: 10;">
        <i>chevron_left</i>
    </button>
    <button class="circle surface absolute right middle-align elevate" onclick="scrollCarousel(1)" style="top: 50%; transform: translateY(-50%); right: -20px; z-index: 10;">
        <i>chevron_right</i>
    </button>
</div>
{% endif %}

<div class="large-space"></div>

{% include "partials/recipe_list.html" %}

{% endblock %}

{% block page_scripts %}
{% include "components/search_scripts.html" %}
{% include "components/carousel_scripts.html" %}
{% endblock %}