{% import '@OroUI/macros.html.twig' as UI %}
{% import '@OroDataGrid/macros.html.twig' as dataGrid %}

<div class="image-collection view">
    <table class="grid grid-main-container table table-bordered">
        <thead>
        <tr>
            <th>{{ 'oro.cms.imageslide.slide_order.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.url.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.title.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.text.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.text_alignment.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.display_in_same_window.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.main_image.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.medium_image.label'|trans }}</th>
            <th>{{ 'oro.cms.imageslide.small_image.label'|trans }}</th>
        </tr>
        </thead>

        <tbody>
            {% for imageSlide in imageSlides %}
            <tr>
                <td>
                    {{ imageSlide.slideOrder }}
                </td>
                <td>
                    {{ imageSlide.url }}
                </td>
                <td>
                    {{ imageSlide.title }}
                </td>
                <td>
                    {% if imageSlide.text|oro_html_sanitize %}
                        {{ imageSlide.text|oro_html_sanitize }}
                    {% else %}
                        {{ dataGrid.renderBlankCellValue() }}
                    {% endif %}
                </td>
                <td>
                    {{ ('oro.cms.imageslide.text_alignment.value.' ~ imageSlide.textAlignment)|trans }}
                </td>
                <td>
                    {% if imageSlide.displayInSameWindow %}
                        {{ 'oro.form.link_target.value.same_window'|trans }}
                    {% else %}
                        {{ 'oro.form.link_target.value.new_window'|trans }}
                    {% endif %}
                </td>
                <td>
                    {{ oro_file_view(imageSlide.mainImage, {'galleryId': 'image-slide-' ~ imageSlide.id}) }}
                </td>
                <td>
                    {% if imageSlide.mediumImage %}
                        {{ oro_file_view(imageSlide.mediumImage, {'galleryId': 'image-slide-' ~ imageSlide.id}) }}
                    {% else %}
                        {{ dataGrid.renderBlankCellValue() }}
                    {% endif %}
                </td>
                <td>
                    {% if imageSlide.smallImage %}
                        {{ oro_file_view(imageSlide.smallImage, {'galleryId': 'image-slide-' ~ imageSlide.id}) }}
                    {% else %}
                        {{ dataGrid.renderBlankCellValue() }}
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>