<!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() %}#}

{#{% set detailEvent = entries('studio_event', 'events').where('is_enabled', true).where('id', 1).first() %}#}

<section class="grid-container first-section-fixer 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(1366,352).url() }}"
                         alt="{{ event.banner_title }}"/>

                    <div class="caption">
                        <div class="sizeCenterElm">
                            <div class="boxSize">
                                <span class="titlefeature">{{ 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">{{ event.headline_title }}</h2>
                        <p>{{ event.headline_description }}</p>
                    </div>
                </div>
            </section>#}
            <section class="grid-x">
                <div class="specialBanner box-description nopaci heightMid columns small-12 cell">
                    <img src="{{ image(detailEvent.event_image.cropped()).resize(1920,495).quality(100).url() }}"
                         alt="{{ detailEvent.name }}"/><!-- 683 x 798 -->

                    {% if detailEvent.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="caption">
                        <div class="sizeCenterElm">
                            <div class="grid-x">
                                <div class="small-8">
                                    {% if detailEvent.ending_date.format('Y-m-d') <= carbon().today().format('Y-m-d') %}
                                        <p><strong>{{ trans('theme::event.closed') }}</strong></p>
                                    {% else %}
                                        {% if detailEvent.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">{{ detailEvent.starting_date.format('d F Y') }}</span>
                                    <h2 class="eventTitle">{{ detailEvent.name }}</h2>
                                    {%
                                        if detailEvent.ending_date.format('Y-m-d') <= carbon().today().format('Y-m-d') or
                                        (detailEvent.available_ticket.value - participants) <= 0
                                    %}

                                    {% else %}
                                        {#<span class="textTitle">Ticket Available</span>#}
                                        {#<span class="date">{{ participants }}/{{ detailEvent.available_ticket }}</span>#}
                                        <a href="{{ url_current() }}/form" class="link">{{ trans('theme::event.book-ticket') }}</a>
                                    {% endif %}
                                </div>
                                <div class="small-4">
                                    <span class="textTitle">{{ trans('theme::event.location') }}</span>
                                    <span class="contentOswald">{{ detailEvent.location }}</span>
                                    <span class="spacer"></span>
                                    <span class="textTitle">{{ trans('theme::event.time') }}</span>
                                    <span class="contentOswald">{{ detailEvent.event_time }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- END specialBanner // satu Banner Besar -->
            </section>

            <section class="grid-x">
                <div class="sizeCenterElm">
                    <div class="medium-12 mainContent cell contentProd">
                        {{ detailEvent.event_content.render|raw }}
                    </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>
