<!DOCTYPE html>
<html>
<head>
	<title>{% block title %}Neural Network Visualization{% endblock %}</title>
	<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css" integrity="sha512-8Tb+T7SKUFQWOPIQCaLDWWe1K/SY8hvHl7brOH8Nz5z1VT8fnf8B+9neoUzmFY3OzkWMMs3OjrwZALgB1oXFBg==" crossorigin="anonymous" />
	{% block imports %}
	{% endblock %}
	
	<style type="text/css">
		.conv-card{
			background-color: floralwhite !important;
		}
        {% block styling %}
        {% endblock %}
	</style>
</head>
<body>
	<!-- Menu  -->
	<div class="ui attached stackable inverted menu">
		<div class="ui container">
			<a class="item">MODEL VISUALIZATION</a>
			<a class="item" href='#'>
				<i class="home icon"></i> Home
			</a>
			<a class="item" href="{% url 'vggInput' %}">
				<i class="camera retro icon"></i> VGG Input
			</a>
			<div class="ui simple dropdown item">
				Visualizations
				<i class="dropdown icon"></i>
				<div class="menu">
					<a class="item" href="{% url 'mnist' %}"><i class="list ol icon"></i> Mnist</a>
					<a class="item" href="{% url 'flower' %}"><i class="image outline icon"></i> Flower </a>
					<a class="item" href="{% url 'catDog' %}"><i class="cat icon"></i><i class="dog icon"></i> Cat-Dog </a>
					<a class="item" href="{% url 'vgg' %}"><i class="photo video icon"></i> VGG</a>
				</div>
			</div>
			
		</div>
	</div>

	<!-- Content  -->
	<div class="ui container" style="width: 80%;padding-top: 5em;">
        {% block content %}
        {% endblock %}
	</div>

    <!-- Modals -->
    <div class="modals">
    {% block modals %}
    {% endblock %} 
    </div>

    <script type="text/javascript">
        {% block scripts %}
        {% endblock %}
    </script>
</body>
</html>