{% extends 'MonitorLecturerApp/template.html' %}
<!DOCTYPE html>
<html lang="en">
<body id="page-top">
    <!-- Page Wrapper -->

  <div id="wrapper">
    <!-- Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Begin Page Content -->
        {% block 'container-fluid' %}
        <div class="container-fluid">
          {% load static %}
          <!-- Page Heading -->

          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">{{video_name}}</h1>
            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
          </div>

<!--          &lt;!&ndash; Content Row &ndash;&gt;-->
          <div class="row">

            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-12 col-md-6 mb-4">
              <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                  <div class="row">
                    <div class="col-3">
                      <video width="500" height="300" controls>
                        <source src="{% static '' %}FirstApp/videos/{{video_name}}" type="video/mp4">
                        Your browser does not support the video tag.
                      </video>
                    </div>

                    <div class="col-3"></div>
                    <!--progress bars-->
                    <div class="col-6">
                      <h2 class="big font-weight-bold">Emotion Detection</h2>
                      <h4 class="small font-weight-bold">Anger
                        <span class="float-right">{{meta.angry_perct}}%</span></h4>
                      <div class="progress mb-4">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <h4 class="small font-weight-bold">Happy
                        <span class="float-right">{{meta.happy_perct}}%</span></h4>
                      <div class="progress mb-4">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <h4 class="small font-weight-bold">Sadness
                        <span class="float-right">{{meta.sad_perct}}%</span></h4>
                      <div class="progress mb-4">
                        <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <h4 class="small font-weight-bold">Surprise
                        <span class="float-right">{{meta.surprise_perct}}%</span></h4>
                      <div class="progress mb-4">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <h4 class="small font-weight-bold">Neutral
                        <span class="float-right">{{meta.neutral_perct}}%</span></h4>
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>

                      <div class="form-control">
                        <button type="button" id="test" data-target="#gif-body" data-toggle="modal">Test</button>
                      </div>

                    </div>

                  </div>

                  <div class="row">
                    <h2 class="big font-weight-bold">Eye Gaze Estimation</h2>
                  </div>

                  <div class="row">
                    <div class="col-6">
                      <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>

          </div>

        </div>
        {% endblock %}
        <!-- End of container-fluid -->

      </div>
      <!-- End of Main Content -->

    </div>
    <!-- End of Content Wrapper -->

  </div>

  {% block 'modal' %}
    <div class="modal fade" id="gif-body" role="dialog" aria-labelledby="gif-body">
      <div class="modal-dialog modal-lg" style="max-width: 1600px; max-height: 800px">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title">Processing....</h2>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>

          <div class="modal-body text-center">
            <img src="{% static 'FirstApp/images/ajax-loader.gif' %}" width="200" height="500" alt="This is a GIF">
            <h5>This might take few seconds...</h5>
          </div>
        </div>
      </div>
   </div>
  {% endblock %}

</body>
</html>