{% set featuretteBlock = pimcore_block('block') %}

<section class="area-featurette">
    {% for i in pimcore_iterate_block(featuretteBlock) %}
        {% set positionSelect = pimcore_select('position', {
            store: [["left","left"],["right","right"]],
            reload: true,
            class: 'align-middle'
        }) %}

        {% set typeSelect = pimcore_select('type', {
            reload: true,
            store: [["video","video"], ["image","image"]],
            class: 'align-middle'
        }) %}

        {% set position = positionSelect.getData()|default('left') %}
        {% if editmode %}
            <div class="mb-3">
                <span class="editmode-label align-middle">Orientation:</span>
                {{ positionSelect | raw }}
            </div>
        {% endif %}

        <div class="row featurette">
            <div class="col-sm-7 {{ position == 'right' ? 'order-md-2' : '' }}">
                <h2 class="featurette-heading">
                    {{ pimcore_input('headline') }}
                    <br>
                    <span class="text-muted">{{ pimcore_input('subline') }}</span>
                </h2>

                <div class="lead">
                    {{ pimcore_wysiwyg('content', {
                        height: 200
                    }) }}
                </div>
            </div>

            <div class="col-sm-5 {{ position == 'right' ? 'order-md-1' : '' }}">

                {% if editmode %}
                    <div class="mb-3">
                        <span class="editmode-label align-middle">Type:</span>
                        {{ typeSelect|raw }}
                    </div>
                {% endif %}

                {% set type = typeSelect.getData() %}

                {% if type == 'video' %}

                    {{
                        pimcore_video('video', {
                            thumbnail: 'featurerette',
                            attributes: {
                                class: 'video-js vjs-default-skin vjs-big-play-centered',
                                'data-setup': '{}'
                            }
                        })
                    }}

                {% else %}

                    {{
                        pimcore_image('image', {
                            imgAttributes: {class: 'featurette-image img-responsive'},
                            thumbnail: 'featurerette'
                        })
                    }}

                {% endif %}

            </div>
        </div>

        {% if featuretteBlock.getCurrent() < (featuretteBlock.getCount() - 1) %}
            <hr class="featurette-divider">
        {% endif %}

    {% endfor %}
</section>