{%extends 'base.html'%}

{%block head%}
<title>Home</title>
    <style>
    input[type=text], select {
        width: 85%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    button[type=submit] {
  width: 50%;
  background-color: #ffcc00;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type=submit]:hover {
  background-color:#ff9933

}
    </style>
{%endblock%}

{%block body%}
<br>
<div align='center'>
  <form action="{% url 'MovieReviewApp:graph' %}" method="POST">
    {%csrf_token%}
      <font color="yellow"><label for="moviename" style="font-size:20px">Enter Movie Name Here</label></font> <br><br>
    <input type="text" name='search_movie' id="search_movie">
      <button type="submit">Search</button>
  </form>
<br><br><br><br>
</div>
    {% load static %}
    <div class="container" align="centre" style="width: 60%;height: 30%;">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="{% static "/MovieReviewApp/gullyboy.jpg" %}" alt="Gully Boy" style="width:100%; height: 30%">
      </div>

      <div class="item">
        <img src="{% static "/MovieReviewApp/avengers1.jpg" %}" alt="Avengers" style="width:100%; height: 30%">
      </div>

      <div class="item">
        <img src="{% static "/MovieReviewApp/marvel.jpg" %}" alt="Marvel" style="width:100%; height: 30%">
      </div>
        <div class="item">
        <img src="{% static "/MovieReviewApp/shaw.jpg" %}" alt="Shawshank" style="width:100%; height: 30%">
      </div>
        <div class="item">
        <img src="{% static "/MovieReviewApp/boh.jpg" %}" alt="Bohemian Rhapsody" style="width:100%; height: 30%">
      </div>
        <div class="item">
        <img src="{% static "/MovieReviewApp/dangal.jpg" %}" alt="Dangal" style="width:100%; height: 30%">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
    </div>

{#    <div class="container" align="center">#}
{#            <img src="{% static "/MovieReviewApp/gullyboy.jpg" %}" alt="My image" align="center">#}
{#        </div>#}
{%if data == ''%}
{%else%}
{#<div style="width: 60%" align='center'>#}
{#  <canvas id="myChart" width=60% height=50%></canvas>#}
{#  <script>#}
{#    var sentiment = parseFloat("{{data}}")#}
{#    var ctx = document.getElementById("myChart");#}
{##}
{#    var myChart = new Chart(ctx, {#}
{#      type: 'bar',#}
{#      data: {#}
{#        labels: ["Sentiment Rating from TMDB API", "Sentiment Rating from Web Scraper", "Actual Rating", "Proposed Rating"],#}
{#        datasets: [{#}
{#          label: 'Sentiment Values VS Source for Reviews',#}
{#          data: [8.5, sentiment, 6.2, 6.8, 2],#}
{##}
{#          backgroundColor: [#}
{#            'rgba(255, 99, 132, 0.2)',#}
{#            'rgba(54, 162, 235, 0.2)',#}
{#            'rgba(255, 206, 86, 0.2)',#}
{#            'rgba(75, 192, 192, 0.2)'#}
{##}
{#          ],#}
{#          borderColor: [#}
{#            'rgba(255,99,132,1)',#}
{#            'rgba(54, 162, 235, 1)',#}
{#            'rgba(255, 206, 86, 1)',#}
{#            'rgba(75, 192, 192, 1)'#}
{##}
{#          ],#}
{#          borderWidth: 1#}
{#        }]#}
{#      },#}
{#      options: {#}
{#        scales: {#}
{#          yAxes: [{#}
{#            ticks: {#}
{#              beginAtZero: true#}
{#            }#}
{#          }]#}
{#        }#}
{##}
{#      }#}
{#    });#}
{#  </script>#}
{#</div>#}
{%endif%}
{%endblock%}