<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("build.css", "theme::css/scroll.css") }}
    {{ asset_add("build.css", "theme::css/owlc.css") }}

    {{ asset_style("build.css", ["min"]) }}
    <link rel="stylesheet" href="{{ asset_url("theme::css/scroll.css") }}">
    <link rel="stylesheet" href="{{ asset_url("theme::css/owlc.css") }}">

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">
</head>
<body>

{% include "theme::partials/navigation" %}

{% set event = entries('studio_event', 'event_page').first() %}

<section class="grid-container full columns">
    <section class="grid-x">
        <section class="cell studio-event fujiInspiring no-padding columns">
            <section class="grid-x">
                <div class="specialBanner nopaci heightMid columns small-12 cell">
                    <img src="{{ image(event.banner_image.cropped()).resize(1920,495).quality(100).url() }}"
                         alt="{{ event.banner_title }}"/>

                    <div class="caption">
                        <div class="sizeCenterElm">
                            <div class="boxSize">
                                <span class="titlefeature" style="font-size:3em;">{{ event.banner_featured_title }}</span>
                                <h1 class="titleCaption">
                                    {{ event.banner_title }}
                                </h1>
                            </div>
                        </div>
                    </div>
                </div><!-- END specialBanner // satu Banner Besar -->
            </section>
            <section class="grid-x">
                <div class="box-headline columns small-12 cell">
                    <div class="sizeCenterElm">
                        <h2 class="headline" style="font-size:2em;">{{ event.headline_title }}</h2>
                        <p>{{ event.headline_description }}</p>
                    </div>
                </div>
            </section>
            <section class="grid-x">
                <div class="contentProd eventList columns small-12 cell">
                    <div class="sizeCenterElm">
                        <ul class="grid">

                            {#{% for event in entries('studio_event', 'events')
                                .where('is_enabled', true)
                                .whereDate('ending_date','>=', carbon().today().format('Y-m-d'))
                                .orderBy('id', 'desc')
                                .get()
                            %}#}
                            {% for event in entries('studio_event', 'events')
                                .where('is_enabled', true)
                                .orderBy('id', 'desc')
                                .get()
                            %}
                                {% set participants = entries('studio_event', 'participants')
                                    .where('events_id', event.id)
                                    .where('is_confirmed', true)
                                    .count()
                                %}
                                <li>
                                    <img src="{{ image(event.event_cover_image.cropped()).fit(351,352).url() }}"
                                         alt="{{ event.name }}">
                                    {% if event.is_exclusive.true %}
                                        {{ img('theme::img/remove/ExclusiveNew.jpg')
                                        .fit(93,58)
                                        .quality(100)
                                        .attr('title', 'Fuji Exclusive')
                                        .attr('class', 'fujiExclusive')
                                        |raw }}
                                    {% endif %}
                                    <div class="boxEvent">
                                        {% if event.ending_date.format('Y-m-d') <= carbon().today().format('Y-m-d') %}
                                            <p class="event-close"><strong>{{ trans('theme::event.closed') }}</strong></p>
                                        {% else %}
                                            {% if event.starting_date.format('Y-m-d') <= carbon().today().format('Y-m-d') %}
                                                <p><strong>{{ trans('theme::event.ongoing') }}</strong></p>
                                            {% else %}
                                                <p><strong>{{ trans('theme::event.upcoming') }}</strong></p>
                                            {% endif %}
                                        {% endif %}
                                        <span class="date">{{ event.location }}</span>
                                        <span class="date">{{ event.starting_date.format('d F Y') }}</span>
                                        <h3>{{ event.name }}</h3>
                                        {%
                                            if event.ending_date.format('Y-m-d') <= carbon().today().format('Y-m-d') or
                                            (event.available_ticket.value - participants) <= 0
                                        %}
                                            {#<a href="{{ url('event/' ~ event.slug) }}" class="link">See Detail</a>#}
                                        {% else %}
                                            {#<span class="titleFeature">Ticket Available</span>#}
                                            {#<span class="contentOswald">{{ participants }}/{{ event.available_ticket }}</span>#}
                                            <a href="{{ url('event/' ~ event.slug) }}" class="link">{{ trans('theme::event.book-ticket') }}</a>
                                        {% endif %}
                                    </div>
                                </li>
                            {% endfor %}

                        </ul>
                    </div>
                </div>
            </section>

            {% include "templates::related/top-pick-products" %}

        </section><!-- END studio-event -->
    </section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script src="{{ asset_url("theme::js/slider.js") }}"></script>
<script src="{{ asset_url("theme::js/owlc.js") }}"></script>

<script type="text/javascript">
    global();
    $(document).ready(function () {
        studioEvents();
    });
    hecent();
</script>
</body>
</html>
