{% for key, draw in listlottodraw %}
    <article class="box">
    <div class="details col-xs-11 col-sm-12">
        <div class="details-wrapper">
            <div class="first-row">
                <div>
                    <h4 class="box-title">
                        {{ draw.date_draw }}
                    </h4>
                    <div class="amenities">
                        <section class="stage">
                            <figure class="ball {{bullcolors[key][0]}}">
                                <span class="shadow"></span>
                                <span class="eight">
                                    <span class="text-bull" style="position: absolute; transform-origin: 50px 50px;">{{ draw.head }}{{ draw.first }}</span>
                                </span>
                            </figure>
                        </section>
                        <section class="stage">
                            <figure class="ball {{bullcolors[key][1]}}">
                                <span class="shadow"></span>
                                <span class="eight">
                                    <span class="text-bull" style="position: absolute; transform-origin: 50px 50px;">{{ draw.second }}</span>
                                </span>
                            </figure>
                        </section>
                        <section class="stage">
                            <figure class="ball {{bullcolors[key][2]}}">
                                <span class="shadow"></span>
                                <span class="eight">
                                    <span class="text-bull" style="position: absolute; transform-origin: 50px 50px;">{{ draw.third }}</span>
                                </span>
                            </figure>
                        </section>
                    </div>
                </div>
                {#<div>
                    <span class="price"><small>AVG/PERSON</small>$620</span>
                </div>#}
            </div>
            <div class="second-row">
                <div class="time">
                    <div class="take-off col-sm-4">
                        <div class="icon"><i class="soap-icon-calendar-1 yellow-color"></i></div>
                        <div>
                            <span class="skin-color">Date/Heure</span><br>{{draw.date_draw}}
                        </div>
                    </div>
                    <div class="landing col-sm-4">
                        <div class="icon"><i class="fa fa-ticket yellow-color"></i></div>
                        <div>
                            <span class="skin-color">Lotto</span><br>{{draw.lotto}}
                        </div>
                    </div>
                    <div class="total-time col-sm-4">
                        <div class="icon"><i class="soap-icon-clock yellow-color"></i></div>
                        <div>
                            <span class="skin-color">Heure de jeu</span><br>{{draw.draw}}
                        </div>
                    </div>
                </div>
                {#<div class="action">
                    <a href="flight-detailed.html" class="button btn-small full-width">SELECT NOW</a>
                </div>#}
            </div>
        </div>
    </div>
</article>
{% endfor %}