{% include 'header.html' %}
<style>
    .verticalSeparator {
        border-left: 10px solid red;
    }
</style>
<div id="app">
    <b-container fluid>
        {% if comparison_hint_override is defined and comparison_hint_override is not none  %}
        <div class="jumbotron smallJumbotron">
            {{ comparison_hint_override | safe }}
            <h5>({{iteration}}/{{MIN_ITERATION_TO_CANCEL}})</h5>
        </div>
        {% else %}
        <b-jumbotron class="smallJumbotron" header="{{header}} ({{iteration}}/{{MIN_ITERATION_TO_CANCEL}})" lead="{{hint_lead}}" header-level="4">
            {{hint}}
            <strong>{{note}}:</strong> {{note_text}}
        </b-jumbotron>
        {% endif %}

        <!-- https://stackoverflow.com/questions/43999618/how-to-define-a-temporary-variable-in-vue-js-template -->
        <b-row class="ml-1 mr-1">
            {% if result_layout == "columns" or result_layout == "column-single" %}
            <b-col v-for="variantResults in variantsResults" :set="algoIdx = variantsResults.indexOf(variantResults)" :class="variantsResults.indexOf(variantResults) != 0 ? 'verticalSeparator' : ''">
                <b-row align-h="center">
                    <h5>{{algorithm}} [[ variantNames[algoIdx] ]]</h5>
                </b-row>
                <b-row align-h="center" class="mb-1 mt-1" v-for="row in variantResults">
                    <b-col sm="auto" class="align-middle" v-for="col in row">
                        <b-img :id="variantNames[algoIdx] + '_' + col.movie_idx" style="width: 175px; height: auto;" center :src="col.url" v-on:click="onSelectMovie($event, col, variantsResults.indexOf(variantResults))" :name="col.movie_idx" :alt="col.movie" v-b-tooltip.hover :title="col.movie" />
                    </b-col>
                </b-row>
                <b-row align-h="center">
                    <b-col sm="4">
                        <label for="rating-sm" class="mt-1">{{algorithm_satisfaction}}</label>
                        <b-form-rating :variant="algorithmRatingVariant(variantsResults.indexOf(variantResults))" v-on:change="onAlgorithmRatingChanged($event, variantsResults.indexOf(variantResults))" show-value show-value-max id="rating-sm" size="sm"></b-form-rating>
                    </b-col>
                </b-row>
            </b-col>
            {%elif result_layout == "rows" or result_layout == "row-single" %}
            <b-col align-h="center">
                <b-row align-h="center" v-for="variantResults in variantsResults" :set="algoIdx = variantsResults.indexOf(variantResults)">
                    <b-col class="text-center" align-h="center">
                        <h5>{{algorithm}} [[ variantNames[algoIdx] ]]</h5>
                        <b-row align-h="center" class="mb-1 mt-1" v-for="row in variantResults">
                            {% if result_layout == "rows" %}
                            <b-col class="col" xl="auto" class="align-middle" v-for="col in row">
                            {% else %}
                            <b-col class="align-middle" v-for="col in row">
                            {% endif %}
                                <b-img :id="variantNames[algoIdx] + '_' + col.movie_idx" fluid :src="col.url" v-on:click="onSelectMovie($event, col, variantsResults.indexOf(variantResults))" :name="col.movie_idx" :alt="col.movie" v-b-tooltip.hover :title="col.movie" />
                            </b-col>
                        </b-row>
                        <b-row align-h="center">
                            <b-col cols="4">
                                <label for="rating-sm" class="mt-1">{{algorithm_satisfaction}}</label>
                                <b-form-rating :variant="algorithmRatingVariant(variantsResults.indexOf(variantResults))" v-on:change="onAlgorithmRatingChanged($event, variantsResults.indexOf(variantResults))" show-value show-value-max id="rating-sm" size="sm"></b-form-rating>
                            </b-col>
                        </b-row>
                        
                        <!-- Separator (except for after last one) -->
                        <b-row v-if="algoIdx < variantsResults.length - 1" class="mt-1 mb-1">
                            <b-container fluid>
                                <div style="height: 10px; background-color: red;"></div>
                            </b-container>
                        </b-row>
                    </b-col>
                </b-row>
            </b-col>
            {%elif result_layout == "row-single-scrollable" %}

            <b-col align-h="center">
                <b-row align-h="center" v-for="variantResults in variantsResults" :set="algoIdx = variantsResults.indexOf(variantResults)">
                    <!-- <div class="text-center" style="max-width: 100%;" > -->
                    <b-col class="text-center align-middle" align-h="center" xl="6" sm="auto" md=auto lg="6" >
                        <h5>{{algorithm}} [[ variantNames[algoIdx] ]]</h5>
                        <div :id="variantNames[algoIdx] + '-scrollableDiv'" name="scrollableDiv" style="overflow-x: auto; scroll-snap-type: x mandatory; white-space: nowrap; display: flex; flex-wrap: nowrap; align-items: center; width: 100%; text-align: left;" v-for="row in variantResults">
                            <div style="scroll-snap-align: center; margin-right: 1px; flex: 0 0 auto;" cols="auto" class="mr-3" v-for="col in row">
                                <b-img :id="variantNames[algoIdx] + '_' + col.movie_idx" :style="{width: 'auto', height: imageHeight + 'px'}" center :src="col.url" v-on:click="onSelectMovie($event, col, variantsResults.indexOf(variantResults))" :name="col.movie_idx" :alt="col.movie" v-b-tooltip.hover :title="col.movie" />
                            </div>
                        </div>
                        <b-row align-v="center">
                            <b-col align-h="start">
                                <label for="rating-sm" class="mt-1">{{algorithm_satisfaction}}</label>
                            </b-col>
                            <b-col align-h="end">
                                <b-form-rating
                                    class="mt-1" :variant="algorithmRatingVariant(variantsResults.indexOf(variantResults))"
                                    v-on:change="onAlgorithmRatingChanged($event, variantsResults.indexOf(variantResults))"
                                    show-value show-value-max id="rating-sm" size="sm">
                                </b-form-rating>
                            </b-col>
                        </b-row>
                        
                        <!-- Separator (except for after last one) -->
                        <b-row v-if="algoIdx < variantsResults.length - 1" class="mt-1 mb-1">
                            <b-container fluid>
                                <div style="height: 10px; background-color: red;"></div>
                            </b-container>
                        </b-row>
                    </b-col>
                    <!-- </div> -->
                </b-row>
            </b-col>
            {%elif result_layout == "max-columns" %}
            <b-col v-for="variantResults in variantsResults" :set="algoIdx = variantsResults.indexOf(variantResults)" :class="variantsResults.indexOf(variantResults) != 0 ? 'verticalSeparator' : ''">
                <b-row align-h="center">
                    <h5>{{algorithm}} [[ variantNames[algoIdx] ]]</h5>
                </b-row>
                <b-row align-h="center" align-v="center" class="mb-1 mt-1" v-for="row in variantResults">
                    <b-col lg="4" xl="auto" class="align-middle" v-for="col in row">
                        <b-img :id="variantNames[algoIdx] + '_' + col.movie_idx" fluid :style="{ 'max-width': maxColumnsMaxWidth + 'px' }" center :src="col.url" v-on:click="onSelectMovie($event, col, variantsResults.indexOf(variantResults))" :name="col.movie_idx" :alt="col.movie" v-b-tooltip.hover :title="col.movie" />
                    </b-col>
                </b-row>
                <b-row align-h="center">
                    <b-col sm="4">
                        <label for="rating-sm" class="mt-1">{{algorithm_satisfaction}}</label>
                        <b-form-rating :variant="algorithmRatingVariant(variantsResults.indexOf(variantResults))" v-on:change="onAlgorithmRatingChanged($event, variantsResults.indexOf(variantResults))" show-value show-value-max id="rating-sm" size="sm"></b-form-rating>
                    </b-col>
                </b-row>
            </b-col>
            {% endif %}
        </b-row>
        <hr>
        <b-row v-if="!selected.length" class="mt-2" align-h="center">
            <b-form-checkbox
                :state="dontLikeAnythingState"    
                v-model="dontLikeAnythingValue"
            >
                {{like_nothing}}
            </b-form-checkbox>
        </b-row>
        <b-row class="mt-3 ml-1 mr-1" align-h="center">
            <b-form-group :hidden="variantsResults.length != 2" label-align="center" label="{{algorithm_how_compare}}" v-slot="{ ariaDescribedby }">
                <b-form-radio-group
                  id="radio-group-2"
                  :aria-describedby="ariaDescribedby"
                  name="radio-sub-component"
                  :state="algorithmComparisonState"
                  v-model="algorithmComparisonValue"
                >
                  <b-form-radio value="first">[[variantNames.at(0)]] {{significantly}}</b-form-radio>
                  <b-form-radio value="second">[[variantNames.at(0)]] {{slightly}}</b-form-radio>
                  <b-form-radio value="third">{{same}}</b-form-radio>
                  <b-form-radio value="fourth">[[variantNames.at(1)]] {{slightly}}</b-form-radio>
                  <b-form-radio value="fifth">[[variantNames.at(1)]] {{significantly}}</b-form-radio>
                </b-form-radio-group>
            </b-form-group>
        </b-row>
        <b-row class="text-center mb-5" align-h="center">
            <b-col center class="align-middle">
                
            </b-col>
            <b-col center class="align-middle">
                <b-form @submit="busy = true" method="GET" action="{{ url_for(consuming_plugin + '.algorithm_feedback') }}">
                    <input type="hidden" hidden="true" :value="selectedMovieIndices" name="selected_movies"/>
                    <input type="hidden" hidden="true" :value="selectedMovieVariants" name="selected_movie_variants"/>
                    <input v-for="i in variantsResults.length" type="hidden" hidden="true" :key="i" :value="algorithmRatings[i - 1]" :name="'ar_'.concat(i)"/>
                    <input type="hidden" hidden="true" :value="dontLikeAnythingValue" name="nothing"/>
                    <input type="hidden" hidden="true" :value="algorithmComparisonValue" name="cmp"/>
                    <b-overlay
                    :show="busy"
                    rounded
                    opacity="0.6"
                    spinner-small
                    spinner-variant="primary"
                    class="d-inline-block"
                    >
                    {% if iteration < MIN_ITERATION_TO_CANCEL %}
                        <b-button name="next_compare" type="submit" block variant="primary" :disabled="!allValidated" center>{{next}}</b-button>
                    {% else %}
                        <b-btn name="finish_compare" block type="submit" variant="success" :disabled="!allValidated" center>{{finish}}</b-btn>
                    {% endif %}    
                    </b-overlay>
                </b-form>
            </b-col>
            <b-col></b-col>
        </b-row>
    </b-container>
    
    
</div>

<script type='text/javascript'>
    // Capture JINJA stuff here
    var movies = {{movies | tojson | safe}};
    var resultLayout = "{{result_layout}}";
    var iteration = "{{iteration}}";
    var minIterationToCancel = "{{MIN_ITERATION_TO_CANCEL}}";
    var csrfToken = "{{csrf_token()}}"
    
    {% if result_layout == "columns" %}
    var itemsPerRow = 2; // Two items per row
    {% elif result_layout == "column-single" %}
    var itemsPerRow = 1; // Single item per row (thus a column)
    {% elif result_layout == "rows" %}
    var itemsPerRow = 5; // 5 items per row
    {% elif result_layout == "row-single" %}
    var itemsPerRow = 1000; // I.e. everything
    {% elif result_layout == "row-single-scrollable" %}
    var itemsPerRow = 1000; // Deserves special handling in HTML/CSS
    {% elif result_layout == "max-columns" %}
    var itemsPerRow = 1000; // Deserves special handling in JS & HTML/CSS
    {% endif %}

    function compare_ctx_lambda() {
        return {
            "items": Array.from(document.getElementsByTagName("img")).map(x => {
                return {
                    "id": x.id, // Corresponds to movie idx
                    "name": x.name,
                    "url": x.src,
                    "title": x.title,
                    "viewport": getElementBoundingBox(x)
                };
            }),
            "movie_scroll": true
        };
    }
</script>
<script src="{{url_for('static', filename='resolution_handling.js')}}"></script>
<script src="{{url_for('static', filename='interaction_reporting.js')}}"></script>
{{ emit_assets('layoutshuffling','compare_algorithms.js') }}     
{% if footer_override is defined and footer_override is not none %}
  <div class="footerDiv mt-3">
    {{ footer_override|safe }}
  </div>
</body>
</html>
{% else %}
{% include 'footer.html' %}
{% endif %}