{% extends "base.html" %}

{% block content %}

<h1 class="title">Optimal Sticker Comparison Table</h1>

<div class="tabs is-centered">
    <ul>
        {% for comp_type in comparison_types %}
        {% if loop.index0 == comparison_type %}
        <li class="is-active"><a href="{{get_url(comparison_type=loop.index0, comparison_option=0)}}">{{comp_type}}</a>
        </li>
        {% else %}
        <li><a href="{{get_url(comparison_type=loop.index0, comparison_option=0)}}">{{comp_type}}</a></li>
        {% endif %}
        {% endfor %}
    </ul>
</div>

<div class="tabs is-centered">
    <ul>
        {% for comp_option in comparison_options %}
        {% if loop.index0 == comparison_option %}
        <li class="is-active"><a
                href="/sticker_comparison_table?type={{comparison_type}}&option={{loop.index0}}">{{comp_option}}</a>
        </li>
        {% else %}
        <li><a href="/sticker_comparison_table?type={{comparison_type}}&option={{loop.index0}}">{{comp_option}}</a></li>
        {% endif %}
        {% endfor %}
    </ul>
</div>

<h1 class="subtitle">Statistic Report</h1>

<!-- Statistics Diagrams -->

<div class="is-flex is-justify-content-center is-align-content-center is-flex-wrap-wrap" style="left: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; position: relative; right: 50%; width: 100vw;">
    <img style="height: auto; width: 50rem;" src={{distribution_diagram_src}}>
    <img style="height: auto; width: 50rem;" src={{boxplot_diagram_src}}>
</div>

<!-- Statistics Table -->

<table class="table is-fullwidth is-hoverable">
    <thead>
        <tr>
            <th></th>
            {% for column_head in statistics_table.column_headers %}
                <th scope="col">{{column_head}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row_name, row_content in statistics_table.rows.items() %}
            <tr>
                <th scope="row">{{row_name}}</th>
                {% for column_head, cell_content in row_content.items() %}
                    <td>
                        {{cell_content}}
                    </td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

<!-- Sticker Table -->

<h1 class="subtitle">Stickers</h1>

<div class="table-container">
    <table class="table is-fullwidth is-hoverable">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Image</th>
                {% for column_head in column_headers %}
                <th scope="col">{{column_head}}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for comparison_row in comparison_rows %}
            <tr>
                <th scope="row">{{comparison_row.id}}</th>
                <td><img src="{{comparison_row.image_src}}"></td>
                {% for strategy_result in comparison_row.results %}
                <td>
                    <div>
                        <img src="{{strategy_result.image_src}}">
                        <br>
                        {% if strategy_result.area < 0 %}
                            No Fooling Sticker Found
                        {% else %}
                            Area = {{strategy_result.area}}
                            <br>
                            Time = {{strategy_result.time}} ms
                            <br>
                            Fitness = {{strategy_result.fitness_value}}
                        {% endif %}
                    </div>
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<nav class="pagination is-centered" role="navigation">
    <ul class="pagination-list">
        {% if pagination_info.current_page > 2 %}
        <li><a class="pagination-link"
                href="{{get_url(page=1)}}">1</a>
        </li>
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        {% endif %}
        {% if pagination_info.current_page > 1 %}
        <li><a class="pagination-link"
                href="{{get_url(page=pagination_info.current_page - 1)}}">{{pagination_info.current_page
                - 1}}</a></li>
        {% endif %}
        <li><a class="pagination-link is-current">{{pagination_info.current_page}}</a></li>
        {% if pagination_info.last_page != pagination_info.current_page %}
        <li><a class="pagination-link"
                href="{{get_url(page=pagination_info.current_page + 1)}}">{{pagination_info.current_page
                + 1}}</a></li>
        {% endif %}
        {% if pagination_info.last_page - pagination_info.current_page > 1 %}
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="pagination-link"
                href="{{get_url(page=pagination_info.last_page)}}">{{pagination_info.last_page}}</a>
        </li>
        {% endif %}
    </ul>
</nav>

{% endblock %}