{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
{% block title %}{{ model_name }} Visualization{% endblock %}

{% block styling %}
.padded-label{
    margin-left: 5.2em !important;
    margin-top:-1em !important;
}
.resizing-image{
    width: 70% !important;
    height: auto !important;
}
{% endblock %}

{% block content %}
<h1 class="ui" style="text-align:center;">MNIST HIDDEN LAYER VISUALIZATION</h1>
{% for class in images %}
<div class="ui fluid card">
    <div class="content">
        <div class="header">Class Type: {{ class.class_type }}</div>
    </div>
    <div class="content">
        <div class="ui middle aligned center aligned grid">
            <div class="four wide column">
                <div class="ui header">Input Image</div>
                <div class="ui raised teal card" style="margin: 2em auto;">
                    <div class="image">
                        <img src="{% static class.images.input %}" style="height:15em;">
                    </div>
                    <div class="content">
                        <div class="header">
                            Input.jpg
                        </div>
                    </div>
                    <div class="extra content">
                        <span class="">
                            Mnist Input
                        </span>
                    </div>
                </div>
            </div>
            <div class="eight wide column">
                <div class="ui two column grid">
                    {% for conv_layer in class.images.convolution %}
                        <div class="column">
                            <div class="ui raised card">
                                <div class="content conv-card">
                                <div class="header">Convolution Layer {{ forloop.counter }}</div>
                                </div>
                                <div class="content">
                                <div class="ui mini statistics" style="margin: 0px auto;padding: 1em 0;">
                                    <div class="brown statistic" style="padding-left: 1em;">
                                    <div class="value">
                                        {{ conv_layer.kernel_size }} x {{ conv_layer.kernel_size }}
                                    </div>
                                    <div class="label">
                                        Kernel Size
                                    </div>
                                    </div>
                                    <div class="brown statistic">
                                    <div class="value">
                                        <i class="layer group icon"></i> {{ conv_layer.current_depth }}
                                    </div>
                                    <div class="label">
                                        Count
                                    </div>
                                    </div>
                                </div>
                                <h4 class="ui sub header" style="margin-top: 0;">Visuals</h4>
                                <div class="ui small feed">
                                    <div class="event">
                                    <div class="content" style="text-align: center;">
                                        <div class="ui buttons">
                                            <button class="ui teal button" onclick="open_modal('weights-{{ class.class_type }}-conv{{ forloop.counter }}')">Weights</button>
                                            <div class="or"></div>
                                            <button class="ui secondary button" onclick="open_modal('outputs-{{ class.class_type }}-conv{{ forloop.counter }}')">Outputs</button>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div> 
                            </div>
                        </div>
                        <div class="ui fullscreen modal weights-{{ class.class_type }}-conv{{ forloop.counter }}">
                            <i class="close icon"></i>
                            <div class="header">Weights of Convolution {{ forloop.counter }}</div>
                            <div class="scrolling content">
                                {% for weight in conv_layer.weights %}
                                <div class="ui segment fluid card">
                                    <a class="left aligned floating ui {% get_table_color forloop.counter0 %} ribbon label">Kernel {{ forloop.counter }}</a>
                                    <div class="content">
                                        <div class="ui four column grid">
                                            {% for link in weight %}
                                                <div class="column">
                                                    <div class="ui fluid image">
                                                        <img src="{% static link %}" class="resizing-image">
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="ui large modal outputs-{{ class.class_type }}-conv{{ forloop.counter }}">
                            <i class="close icon"></i>
                            <div class="header">Outputs of Convolution {{ forloop.counter }}</div>
                            <div class="scrolling content">
                                <div class="ui three column grid">
                                    {% for output in conv_layer.outputs %}
                                    <div class="column">
                                        <div class="ui fluid image">
                                            <a class="ui {% get_table_color forloop.counter0 %} ribbon label padded-label"> Kernel {{ forloop.counter }}</a>
                                            <img src="{% static output %}" class="resizing-image">
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="four wide column">
                <div class="ui header">Output Image</div>
                <div class="ui raised teal card" style="margin: 2em auto;">
                    <div class="image">
                        <img src="{% static class.images.output %}" style="height:13em;">
                    </div>
                    <div class="content">
                        <div class="header">
                            Output.jpg
                        </div>
                    </div>
                    <div class="extra content">
                        <span class="">
                            Mnist Output
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}

{% block scripts %}
function open_modal(class_name){
    $('.'+class_name).modal('show');
}
{% endblock %}