{% extends "layout.html" %}

{% block style %}
<style>
  /* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup_close {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid black;
    background-color: whitesmoke;
    width: 100px;
}
  
  /* The actual popup */
.popuptext {
    visibility: hidden;
    width: 75vw;
    height: 75vh;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 14.5%;
    left: 12.5%;
    margin: 0 auto;
  }
  

  
  /* Toggle this class - hide and show the popup */
.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

input[type=range][orient=vertical] {
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* WebKit */
  width: 8px;
  height: 500px;
  padding: 0px 40px;
  margin-top:100px;
  float: right;
}
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

</style>
{% endblock %}

{% block title %}
    Home
{% endblock %}

{% block main %}
    <form action="/" method="post">
      <div class="form-group">
        <div class="container">
          {% for row in range((items|length)//3) %}
            <div class="row">
              {% for item in items %}
                <div id="{{ item[3] }}" class="col-4 popup" onclick="myFunction{{ item[3] }}()">
                  <img src="{{ item[0] }}" alt="drink image{{ item[3] }}" style="width:150px;">
                  <h2>{{ item[1] }}</h2>
                  <h3>{{ item[2] }}mL left</h3>
                  
                </div>
              {% endfor %}
            </div>
            {% endfor %}
        </div>
        {% for item in items %}
        <div class="popuptext" id="myPopup{{ item[3] }}">
          {% if item[2] | int <= 0 %}
            <h1>SORRY WE ARE OUT OF JUICE</h1>
          {% else %}
            <div class="slidecontainer">
              <img src="{{ item[0] }}" alt="drink image{{ item[3] }}" style="width:20vw;float:left;margin-left:15px;margin-top:15px;">
              <h1>{{ item[1] }}</h1>
              <input autocomplete="off" autofocus class="form-control" name="drinkID{{ item[3] }}" id="drinkID{{ item[3] }}" value="{{ item[3] }}" hidden="true">
              <input autocomplete="off" autofocus class="form-control" name="drinkID" id="drinkID" value="1" hidden="true">
              <div style="padding-top:150px;">
                {% if item[2] | int < 250 %}
                  <h2>Out of Juice!</h2>
                {% elif item[2] | int < 500 %}
                  <button class="btn btn-primary" name="250" type="submit" value="250"><i class="fas fa-coffee fa-3x"></i><br>Small Cup<br>250mL / 8.5 Ounces</button>
                {% elif item[2] | int < 750 %}
                  <button class="btn btn-primary" name="250" type="submit" value="250"><i class="fas fa-coffee fa-3x"></i><br>Small Cup<br>250mL / 8.5 Ounces</button>
                  <button class="btn btn-primary" name="500" type="submit" value="500"><i class="fas fa-glass-whiskey fa-3x"></i><br>Medium Cup<br>500mL / 17 Ounces</button>
                {% else %}
                  <button class="btn btn-primary" name="250" type="submit" value="250"><i class="fas fa-coffee fa-3x"></i><br>Small Cup<br>250mL / 8.5 Ounces</button>
                  <button class="btn btn-primary" name="500" type="submit" value="500"><i class="fas fa-glass-whiskey fa-3x"></i><br>Medium Cup<br>500mL / 17 Ounces</button>
                  <button class="btn btn-primary" name="750" type="submit" value="750"><i class="fas fa-beer fa-3x"></i><br>Large Cup<br>750mL / 25 Ounces</button>
                {% endif %}
              </div>
            </div>
            <div id="{{ item[3] }}#close" class="popup_close" style="margin-top: 100px;" onclick="myFunction{{ item[3] }}()">
              Cancel
            </div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </form>
{% endblock %}

{% block script %}
{% for item in items %}
  <script>
    // When the user clicks on div, open the popup
    function myFunction{{ item[3] }}() {
      var popup = document.getElementById("myPopup{{ item[3] }}");
      var drinkID{{ item[3] }} = document.getElementById("drinkID{{ item[3] }}");
      var drinkID = document.getElementById("drinkID");
      drinkID.value = drinkID{{ item[3] }}.value;
      popup.classList.toggle("show");
    }
  </script>
{% endfor %}
{% endblock %}