{% extends "layout.html" %}
{% block title %} Experiment {% endblock %}

<!-- Page Content -->
{% block inpage_title %}
    <h1 class="display-3">
        <a href="{{ url_for("show_experiment", exp_id=info.prev_id) if info.prev_id else ''}}"><i class="fas fa-caret-left {{ "inactive" if not info.prev_id }}"></i></a>
        {{ info.env }}
        <a href="{{ url_for("show_experiment", exp_id=info.next_id) if info.next_id else ''}} "><i class="fas fa-caret-right {{ "inactive" if not info.next_id }}"></i></a>
        <br>
    </h1>
    <tag class="red"> <i class="fas fa-cogs"></i> {{ info.config }}</tag>
    |
    <tag class="yellow"> <i class="fas fa-wave-square"></i> {{ info.hps.distribution }}</tag>
    <tag class="blue"> <i class="fas fa-brain"></i> {{ info.hps.model }}</tag>
    <tag class="green"> <i class="fas fa-sitemap"></i> {{ info.hps.architecture }}</tag>
    <div style="opacity:0">
        <input type="text" id="copyText"/>
    </div>
    <h3 class="mt-3" id="agentId"> {{ info.current_id }} </h3>
{% endblock %}

{% block side_nav %}
        <ul class="list-unstyled components">
            <li class="active"><a href="#statistics-view">Training Statistics</a></li>
            <li><a href="#hp-view">Hyperparameters</a></li>
            <li><a href="#episode-gifs-view">Episode GIFs</a></li>
            <li><a href="#model-view">Network Graph</a></li>
        </ul>
{% endblock %}

{% block page_content %}

    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">

            <div class="reload-button">
                <button type="button" id="refresh" class="btn btn-circle btn-md">
                    <i class="fas fa-sync"></i>
                </button>
            </div>
        </div>
    </nav>

    <div class="topic-group">
        <div class="row justify-content-center">
            <div class="col col-8">
                <div id="reward-plot">
                    {{ info.plots.reward_progress[0]|safe }}
                    {{ info.plots.reward_progress[1]|safe }}
                </div>
            </div>

            <div class="col col-4">
                <div id="reward-distribution" style="width:100%; height:500px;">
                    {{ info.plots.reward_distribution[0]|safe }}
                    {{ info.plots.reward_distribution[1]|safe }}
                </div>
            </div>

            <div class="col col-8">
                <div id="length-plot">
                    {{ info.plots.length_progress[0]|safe }}
                    {{ info.plots.length_progress[1]|safe }}
                </div>
            </div>

            <div class="col col-4">
                <div id="length-distribution" style="width:100%; height:500px;">
                    {{ info.plots.length_distribution[0]|safe }}
                    {{ info.plots.length_distribution[1]|safe }}
                </div>
            </div>
        </div>
    </div>

    <div class="topic-group">
        {% for p, v in info.plots.auxiliary_plots.items() %}
        <div class="row justify-content-center">
            <div class="col col-12">
                <div id="{{ p }}-plot">
                    {{ v[0]|safe }}
                    {{ v[1]|safe }}
                </div>
            </div>
        </div>
    {%  endfor %}
    </div>

    <div class="topic-group">
        <!--  OBJECTIVE PLOTS  -->
        <div class="row justify-content-center mt-3">
            <h5 align="center" class="sub-title">Objectives</h5>
        </div>

        <div class="row justify-content-center">
            <div class="col col-4">
                <div id="ploss-plot" style="width:100%; height:500px">
                    {{ info.plots.policy_loss[0]|safe }}
                    {{ info.plots.policy_loss[1]|safe }}
                </div>

            </div>

            <div class="col col-4">
                <div id="vloss-plot" style="width:100%; height:500px">
                    {{ info.plots.value_loss[0]|safe }}
                    {{ info.plots.value_loss[1]|safe }}
                </div>
            </div>

            <div class="col col-4">
                <div id="entropy-plot" style="width:100%; height:500px">
                    {{ info.plots.entropies[0]|safe }}
                    {{ info.plots.entropies[1]|safe }}
                </div>
            </div>
        </div>
    </div>

<div class="topic-group">
    <!--  NORMALIZATION PLOTS  -->
    <div class="row justify-content-center mt-3">
        <h5 align="center" class="sub-title">Normalization Preprocessors</h5>
    </div>

    <div class="row justify-content-center mt-3">
        <div class="col col-12">
                {% if "state" in info.plots.normalization %}
                    {{ info.plots.normalization.state[0]|safe }}
                    {{ info.plots.normalization.state[1]|safe }}
                {% endif %}
        </div>

        <div class="col col-12">
                {% if "reward" in info.plots.normalization %}
                    {{ info.plots.normalization.reward[0]|safe }}
                    {{ info.plots.normalization.reward[1]|safe }}
                {% endif %}
        </div>
    </div>
</div>


<div class="topic-group">
    <!--  PER RECEPTOR MEAN PLOTS  -->
    <div class="row justify-content-center mt-3">
        <h5 align="center" class="sub-title">Per Receptor Means (After Preprocessing)</h5>
    </div>

    {% if "per_receptor_mean" in info.plots %}
        <div class="row justify-content-center mt-3">
            <div class="col col-12">
                {{ info.plots.per_receptor_mean[0]|safe }}
                {{ info.plots.per_receptor_mean[1]|safe }}
            </div>
        </div>
    {% endif %}

</div>

<div class="topic-group" id="evaluation-view">
    <div class="row justify-content-center">
        <div class="col col-4">
            <button id="evaluate-button">Evaluate</button>
        </div>
    </div>
</div>

<div class="topic-group" id="hp-view">
    <div class="row justify-content-center">
        <div class="col col-6">
            <h4 align="center" class="sub-title">Hyperparameters</h4>

            <table class="table table-striped" title="Hyperparameters">
                <thead>
                <tr>
                    <th scope="col">Hyperparameter</th>
                    <th scope="col">Value</th>
                </tr>
                </thead>
                <tbody>
                {% for p, v in info.hps.items() %}
                    <tr>
                        <td>{{ p }}</td>
                        <td>{{ v }}</td>
                    </tr><?php
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="col col-6">
            <h4 align="center" class="sub-title">Environment</h4>

            <table class="table table-striped" title="Hyperparameters">
                <thead>
                <tr>
                    <th scope="col">Attribute</th>
                    <th scope="col">Value</th>
                </tr>
                </thead>
                <tbody>
                {% for p, v in info.env_meta.items() %}
                    <tr>
                        <td>{{ p }}</td>
                        <td>{{ v }}</td>
                    </tr><?php
                {% endfor %}
                </tbody>
            </table>


            <h4 align="center" class="sub-title">Reward Function</h4>

            <table class="table table-striped" title="Reward Function">
                <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
                </thead>
                <tbody>
                {% for p, v in info.reward_function.items() %}
                    <tr>
                        <td>{{ p }}</td>
                        <td>{{ v }}</td>
                    </tr><?php
                {% endfor %}
                </tbody>
            </table>

            {% if "statistics" in info %}
            <h4 align="center" class="sub-title">Training Statistics</h4>

                <table class="table table-striped" title="Training Statistics">
                    <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for p, v in info.statistics.training.items() %}
                        <tr>
                            <td>{{ p }}</td>
                            <td>{{ v }}</td>
                        </tr><?php
                    {% endfor %}
                    </tbody>
                </table>

                {% if "mem_usage" in info.plots %}
                    {{ info.plots.mem_usage[0]|safe }}
                    {{ info.plots.mem_usage[1]|safe }}
                {% endif %}

                {% if "timings" in info.plots %}
                    {{ info.plots.timings[0]|safe }}
                    {{ info.plots.timings[1]|safe }}
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>

{#        <div class="topic-group" id="episode-gifs-view">#}
{#            <div class="row justify-content-center">#}
{#                <div class="col">#}
{#                    <h4 align="center" class="sub-title">Episode GIFs</h4>#}
{##}
{#                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">#}
{#                        <div class="carousel-inner">#}
{#                            <?php#}
{#                            $gifs = glob($DIR . '/*.gif');#}
{#                            $i = 0;#}
{#                            foreach ($gifs as $filename) {#}
{#                                $iteration = intval(explode("_", $filename)[1])#}
{##}
{#                                ?>#}
{#                            <div class="carousel-item <?php echo($i == 0 ? 'active' : '') ?>">#}
{#                                <img src="<?php echo $filename ?>" class="d-block w-100" alt="...">#}
{#                                <div class="carousel-caption d-none d-md-block">#}
{#                                    <h5 style="color: black">Iteration <?php echo $iteration ?></h5>#}
{#                                    <p style="color: dimgray">Average reward of <?php ?></p>#}
{#                                </div>#}
{#                                </div><?php#}
{##}
{#                                $i++;#}
{#                            }#}
{#                            ?>#}
{#                        </div>#}
{#                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button"#}
{#                           data-slide="prev">#}
{#                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>#}
{#                            <span class="sr-only">Previous</span>#}
{#                        </a>#}
{#                        <a class="carousel-control-next" href="#carouselExampleControls" role="button"#}
{#                           data-slide="next">#}
{#                            <span class="carousel-control-next-icon" aria-hidden="true"></span>#}
{#                            <span class="sr-only">Next</span>#}
{#                        </a>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}

<div class="topic-group" id="model-view">
    <div class="row justify-content-center">
        <div class="col col-8">
            <h4 align="center" class="sub-title">Model</h4>

            <img src="{{ url_for('expfile', exp_id=info.current_id, filename='model.png') }}" alt="Plot of the Model" class="fit-div"/>
        </div>
    </div>
</div>
{% endblock %}

{% block js_footer %}

<script>
    $('.carousel').carousel();

    $("nav ul li").on("click", function () {
        $("nav").find(".active").removeClass("active");
        $(this).addClass("active");
    });

    $(".reload-button").on("click", function () {
        console.log("jo");
        location.reload();
    });

    $("#agentId").on("click", function() {
        /* Get the text field */
        let copyText = $("#copyText")[0];

        copyText.value = $("#agentId")[0].innerHTML;
        copyText.select();
        document.execCommand("copy");
    });

    $("#evaluate-button").on("click", function () {
        let eid = {{ info.current_id }};
        $.ajax({
            type: 'POST',
            url: "{{ url_for("evaluate") }}",
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({'id': eid}),
            success: function (ret) {
                console.log(ret);
            }
        });
    });

</script>

{% endblock %}