<link rel="stylesheet" href="./sly/css/app/widgets/grid_gallery/style.css"/>

<div>
    <div v-if="data.{{{widget.widget_id}}}.widget_routes && data.{{{widget.widget_id}}}.widget_routes.image_clicked_cb">
        <sly-grid-gallery

                :content="data.{{{widget.widget_id}}}.content"
                :options="state.{{{widget.widget_id}}}.options"
                :active-figure="state.{{{widget.widget_id}}}.activeFigure"

                @input="state.{{{widget.widget_id}}}.selectedImage = $event; post('/{{{widget.widget_id}}}/image_clicked_cb')">
            <template v-slot:card-footer="{ annotation }">
                <div v-if="annotation.title && annotation.title.length > 0" style="text-align: center; margin-top: 5px">
                    <el-tag v-html="annotation.title" type="primary" style="height: 100%"></el-tag>
                </div>
            </template>
        </sly-grid-gallery>
    </div>
    <div v-else>
        <sly-grid-gallery
                v-loading="data.{{{widget.widget_id}}}.loading"
                :content="data.{{{widget.widget_id}}}.content"
                :options="state.{{{widget.widget_id}}}.options"
                :active-figure="state.{{{widget.widget_id}}}.activeFigure">
            <template v-slot:card-footer="{ annotation }">
                <div v-if="annotation.title && annotation.title.length > 0" style="text-align: center; margin-top: 5px">
                    <el-tag v-html="annotation.title" type="primary" style="height: 100%"></el-tag>
                </div>
            </template>
        </sly-grid-gallery>
    </div>
</div>
