{% extends 'base.html.twig' %}
{% block title %}Finger Food{% endblock %}
{% block body %}
<div class="fingerfood">
<div class="wrapper">
<ul class="breadcrumb">
<li><a href="{{path('home')}}">{{'accueil'|trans}}</a></li>
<li><a href="{{path('grosse-faim')}}">{{'menu.grossefaim'|trans}}</a></li>
<li>FingerFood</li>
</ul>
<h1 class="titreDualFont"><div><span>Finger</span> Food</div></h1>
<p class="chapo">{{page.chapo|raw}}</p>
<div class="wrapper photo-header" style="background-image:url('/img/header-fingerfood.png');">
<div>
{# <p><a href="https://otacos-cc-staging.flyx.cloud/fr-FR/ordering/choose" class="button">{{'commander'|trans}}</a></p> #}
</div>
</div>
<div class="wrapper rounded3columns">
{% for item in fingerfood %}
<div class="btImg btImgFrites {{item.class}}">
<img src="/img/{{item.image}}" />
<p>{{item.titre|btimgTitre|raw}}</p>
</div>
{% endfor %}
</div>
<div class="wrapper osucre-allergenes">
<p class="btAllergenes" id="openPopin">{{'voirallergenes'|trans}}</p>
</div>
</div>
<h2 class="osucre-h2">{{'fondue.12'|trans}}</h2>
<div class="wrapper rounded3columns">
<div class="btImg btOfondue">
<img src="/img/ofondue.svg" />
<a href="{{path('ofondue')}}"><img src="/img/bt-ofondue4.png" /></a>
</div>
<div class="btImg btImgDesserts">
<img src="/img/bt-desserts.png" />
<a href="{{path('osucre')}}">{{ 'grossefaim.6'|trans|raw }}</a>
</div>
<div class="btImg btImgSoif">
<a href="{{path('boissons')}}">{{ 'boissons'|trans|raw }} <span>{{ 'soifs'|trans|raw }}</span></a>
<img src="/img/bt-boissons_{{ app.request.getLocale()|lower }}.png" />
</div>
</div>
</div>
<div id="popin" class="closed">
<div id="popin_frame">
<div id="popin_content" class="popin_allergenes">
<img src="/img/close_black.svg" width="30" height="25" id="popin_close">
<h2><img src="/img/allergenes.svg" /> {{'allergenes'|trans}}</h2>
{{page.allergenes|raw}}
{{'labase.10'|trans|raw}}
</div>
</div>
</div>
{% endblock %}