{#
    Copying and modifying the storybook template as it's way different as the rest of the TOCs.
    This maybe be done differently on storybook so it can use both versions.
#}
{# Variables that would be passed to the storybook template #}
{% set floating_top = TRUE %}
{% set badge_position = 'content' %}

{# LIBRARIES #}
{{ attach_library('ui_patterns/offer_content.offer_content_lib') }}

{% set floating_top = floating_top|default(false) %}
{% set badge_position = badge_position|default('image') %}
{% set badge %}
    {% include "@molecules/tm-bits/tm-bits-badge.twig" with {
        'badge_text_large': ticket_price,
        'floating': badge_position == 'image',
        'badge_class': badge_position == 'content' ? 'fr ms-3 mb-3'
    } only%}
{% endset %}

{# TEMPLATE #}
{% if back_link_url %}
    {% include '@atoms/form/button/button.twig' with {
        'text': '<i class="' ~ global_icon_left|default('fas fa-chevron-left') ~ '"></i> Back to listings',
        'size': 'btn-sm',
        'tag': 'a',
        'url': back_link_url,
    } only %}
{% endif %}

{% include "@molecules/tm-bits/tm-bits-tags.twig" with {'tags': tags} only %}

<div{% if not floating_top %} class="row"{% endif %}>

    <div class="{% if not floating_top %}col-md-6 off-head-image mb-3 order-0 order-md-1{% else %}off-floating-image ms-sm-4 mb-3{% endif %}">
        {% if badge_position == 'image' %}
            {{ badge }}
        {% endif %}
        {% include "@atoms/html5/image/image.twig" with { "url": img_src, "alt": img_alt, "img_class": 'w-100' } only %}
    </div>

    {% if intro_text and main_text %}
        <div class="{% if not floating_top %}col-md-6 order-1 order-md-0 {% endif %}mb-3 off-head-intro">
            {% if badge_position == 'content' %}
                {{ badge }}
            {% endif %}
            {% if offer_description %}
                <p>{{ offer_description|raw }}</p>
            {% endif %}
            {{ intro_text|raw }}
        </div>
    {% elseif main_text %}
        <div{% if not floating_top %} class="col-md-6 mb-3 order-1 order-md-0"{% endif %}>
            {% if badge_position == 'content' %}
                {{ badge }}
            {% endif %}
            {% if offer_description %}
                <p>{{ offer_description|raw }}</p>
            {% endif %}
            {{ main_text|raw }}
        </div>
    {% endif %}

</div>

<div class="row">

    {% if intro_text and main_text %}
        <div class="col-md-12 mb-3">
            {{ main_text|raw }}
        </div>
    {% endif %}

    <div class="col-md-6">
        {% set claim_value %}
            {{ claim_text|raw }}
            {% if enable_coupon_code %}
                {% if form %}
                    {{ form }}
                {% endif %}
                {% include "@organisms/tm-off/offer-content/partials/offer-cpn.twig" %}
            {% else %}
                {% if find_out_more_url and find_out_more_text %}
                    {% include "@atoms/tm-links/standard/standard.twig" with {
                        "text": find_out_more_text,
                        "url": find_out_more_url,
                        "class": 'btn btn-default',
                    } only %}
                {% endif %}
            {% endif %}
        {% endset %}
        {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
            'text': claim_value,
        } only %}
    </div>

    <div class="col-md-6">
        {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
            'header': 'Restrictions',
            'text': restrictions,
        } only %}

        {% set offer_date %}
            {% include "@molecules/tm-bits/tm-bits-date.twig" with {
                'datetime': expiry_date,
            } only%}
        {% endset %}
        {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
            'header': 'Offer expiry date',
            'text': offer_date,
        } only%}

        {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
            'header': 'Disabled info',
            'text': disabled_info,
        } only%}

        {% if not hide_tickets_button and nearest_station %}
            {% set attrs = create_attribute()
                .setAttribute('data-to-station', nearest_station['crs'])
            %}
            {% set button_text %}
                {% include "@atoms/tm-links/standard/standard.twig" with {
                    "text": 'Buy tickets to ' ~ nearest_station['title'],
                    "url": '#',
                    "class": 'buy-tickets-btn btn btn-default mt-3',
                    "attributes": attrs,
                } only %}
            {% endset %}
            {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
                'text': button_text,
            } only%}
        {% endif %}
    </div>

    {% if offer_map %}
        <div class="col-md-12 mb-3">
            <h2>Location</h2>
            {{ offer_map }}
        </div>
    {% endif %}

    {% if opening_times %}
        <div class="col-md-6">
            {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
                'header': 'Opening times',
                'text': opening_times,
            } only %}
        </div>
    {% endif %}

    {% if telephone or  voucher_type %}
        <div class="col-md-6">
            {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
                'header': 'Telephone',
                'text': telephone,
            } only %}

            {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
                'header': 'ATOC voucher type',
                'text': voucher_type,
            } only %}
        </div>
    {% endif %}

    {% if terms %}
        <div class="col-md-6">
            {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
                'header': 'Terms and conditions',
                'text': terms,
            } only %}
        </div>
    {% endif %}

    {% if getting_there or nearest_station %}
        <div class="col-md-6">

            {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
                'header': 'Getting there',
                'text': getting_there,
            } only %}

            {% if nearest_station %}
                {% set button_text %}
                    {% include "@atoms/tm-links/standard/standard.twig" with {
                        "text": nearest_station['title'],
                        "url": nearest_station['link'],
                        "class": 'stn-link',
                    } only %}
                {% endset %}
                {% include "@organisms/tm-off/offer-content/partials/offer-blk.twig" with {
                    'header': 'Closest station',
                    'text': button_text,
                } only%}
            {% endif %}
        </div>

    {% endif %}

</div>
