{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
{% endblock %}
    
{% block content %}

    <div class="col-md-3">
        <div class="row">

          <form action="/container" method="POST">      
          <label for="container">Containers</label><br>

          <select id="container" name="container" style="width:200px">
          {% for container in containers %}    
              <option value="{{ container }}">{{ container }}</option>
          {% endfor %}    
          </select>
          <input type="submit" value="view container" id="view_container">
                
          </form>
        </div>

        <div class="row">
         <a href="/recipe" target="_blank"><button class="btn btn-default btn-xl question_button">Recipe Generator</button></a>
        </div>

</div>
<div class ="col-md-9">
<img style="width:350px;padding-top:180px;margin-left:200px" src="{{ url_for('static', filename='img/robot.png') }}">
<h1 style="color:#999;padding-left:300px">"Welcome {{ username }}!"</h1>
</div>
{% endblock %}


{% block scripts %}
    <script type="text/javascript">
    $(document).ready(function() {
        $("#container").select2();
     
        // Navigate to author or method page on select
        $("#view_container").click(function(){
            console.log("View Container selected.")
            var selected = $("#container").val();
            document.location = '/container/' + selected
        });

    });
    </script>
{% endblock %}h
