{%- from "@cnbritain/wc-common-image/template/macro.html" import common_image -%}

{%- macro section_gallery(article, gallery_images, brand='default') -%}

    {%- set primary_tag = article|get_primary_tag -%}

    <section class="c-gallery">
        <a href="{{ url_for_article(article) }}" class="c-gallery__link c-gallery__link--article">{{ article['title'] }}</a>

        <div class="c-gallery__wrapper-table">

            <div class="c-gallery__text">
                <div class='c-gallery__text__wrapper'>
                    <h3 class="c-gallery__title">
                        {{ "@cnbritain/wc-assets/import/%s/icons/gallery.svg"|format(brand)|import_svg_icon }}
                        <span>{{ article['title'] }}</span>
                    </h3>
                    {%- if article['teaser_short'] -%}
                        <p class="c-gallery__desc">{{ article['teaser_short']|parse_simple_bbcode(link=False, email=False)|strip_bbcode }}</p>
                    {%- endif -%}
                    <hr class="c-gallery__separator" />
                    {%- if article['profiles']|length > 0 -%}
                        <div class="c-gallery__byline">
                            <span class="c-gallery__byline-prefix">By</span> <span class="c-gallery__byline-name">{{ article['profiles'][0]['full_name'] }}</span>
                        </div>
                    {%- endif -%}
                    <ul class="global__list-reset c-gallery__meta">
                        {%- if primary_tag -%}
                            <li class="c-gallery__meta-item c-gallery__meta-item--tag">
                                {{ primary_tag['title'] }}
                            </li>
                        {%- endif -%}
                        <li class="c-gallery__meta-item c-gallery__meta-item--date">
                            <time datetime="{{ article|get_article_date }}">{{ article|get_article_date|get_relative_time }}</time>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="c-gallery__images c-gallery__visible--medium">
                <div class="c-gallery__images-table">
                    <div class="c-gallery__image-main">
                        {{ common_image(gallery_images['desktop'][0], class='global__image') }}
                    </div>
                    <ul class="global__list-reset c-gallery__image-strip c-gallery__image-strip--medium c-gallery__image-strip--large">
                        {%- for image in gallery_images['desktop'] -%}
                            {%- if not loop.first -%}
                                <li class="c-gallery__image-strip-item">
                                    {%- if loop.last and article['gallery']|get_key('image_count') -%}
                                        {%- set remaining_images = article['gallery']|get_key('image_count') - loop.length -%}
                                        {%- if remaining_images > 0 -%}
                                            <div class="c-gallery__image-strip-item__remaining">
                                                <div class=c-gallery__image-strip-item__remaining-text">
                                                    <span class="c-gallery__image-strip-item__remaining-prefix">+</span> <span class="c-gallery__image-strip-item__remaining-value">{{ remaining_images }}</span>
                                                </div>
                                            </div>
                                        {%- endif -%}
                                    {%- endif -%}
                                    {{ common_image(image, class='global__image') }}
                                </li>
                            {%- endif -%}
                        {%- endfor -%}
                    </ul>
                </div>
            </div>

            <ul class="global__list-reset c-gallery__image-strip c-gallery__image-strip--small c-gallery__visible--small">
                {%- for image in gallery_images['mobile'] -%}
                    <li class="c-gallery__image-strip-item">
                        {%- if loop.last and article['gallery']|get_key('image_count') -%}
                            {%- set remaining_images = article['gallery']|get_key('image_count') - loop.length -%}
                            {%- if remaining_images > 0 -%}
                                <div class="c-gallery__image-strip-item__remaining">
                                    <div>
                                        <span class="c-gallery__image-strip-item__remaining-prefix">+</span> <span class="c-gallery__image-strip-item__remaining-value">{{ remaining_images }}</span>
                                    </div>
                                </div>
                            {%- endif -%}
                        {%- endif -%}
                        {{ common_image(image, class='global__image') }}
                    </li>
                {%- endfor -%}
            </ul>

        </div>
    </section>

{%- endmacro -%}