{% extends "base.html" %}

{% block style %}
<style>
	#camera_list_items {
		max-height: 500px;
		overflow: auto;
	}

	#events_list {
		max-height: 500px;
		overflow: auto;
	}


	.progress {
	  position: fixed;
	  top: 0;
	  z-index: 1000;
	  height: 4px;
	  width: 100%;
	  border-radius: 2px;
	  background-clip: padding-box;
	  overflow: hidden;
	}
	.progress .indeterminate:before {
	  content: "";
	  position: absolute;
	  background-color: inherit;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  will-change: left, right;
	  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
	    infinite;
	  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
	}
	.progress .indeterminate:after {
	  content: "";
	  position: absolute;
	  background-color: inherit;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  will-change: left, right;
	  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
	    infinite;
	  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
	    infinite;
	  -webkit-animation-delay: 1.15s;
	  animation-delay: 1.15s;
	}
	.progress {
	  display: none;
	}
	.htmx-request .progress {
	  display: inline;
	}
	.htmx-request.progress {
	  display: inline;
	}
	@-webkit-keyframes indeterminate {
	  0% {
	    left: -35%;
	    right: 100%;
	  }
	  60% {
	    left: 100%;
	    right: -90%;
	  }
	  100% {
	    left: 100%;
	    right: -90%;
	  }
	}
	@keyframes indeterminate {
	  0% {
	    left: -35%;
	    right: 100%;
	  }
	  60% {
	    left: 100%;
	    right: -90%;
	  }
	  100% {
	    left: 100%;
	    right: -90%;
	  }
	}
	@-webkit-keyframes indeterminate-short {
	  0% {
	    left: -200%;
	    right: 100%;
	  }
	  60% {
	    left: 107%;
	    right: -8%;
	  }
	  100% {
	    left: 107%;
	    right: -8%;
	  }
	}
	@keyframes indeterminate-short {
	  0% {
	    left: -200%;
	    right: 100%;
	  }
	  60% {
	    left: 107%;
	    right: -8%;
	  }
	  100% {
	    left: 107%;
	    right: -8%;
	  }
	}

</style>
{% endblock %}

{% block current_user %}
	{{ template_values['current_user']['email'] }}
    <a href="/logout" tabindex="-1">Logout</a>
{% endblock %}

{% block main %}

{% if template_values['accounts']|count > 1 %}
	{% include 'accounts_partial.html' %}
{% endif %}

<div class="progress" style="height: 3px; background-color: white;">
	<div class="indeterminate" style="background-color: red;"></div>
</div>

<div class="container text-center">

    <div class="row">
		<div class="col-md-5" id="camera_list" style="max-height:400px; overflow:auto;">
			{% include 'cameras_partial.html' %}
		</div>    
	    <div class="col-md-7" id="camera_detail">
	         <h2>Preview Image <i class="bi bi-card-image"></i></h2>
	    </div>
	</div>
<br>
	<div class="row">
		<div class="col-md-12" id="camera_status_events" style="max-height:800px; overflow:auto;">
			<h2>List of Videos <i class="bi bi-calendar-event"></i></h2>
		</div>
	</div>

</div>

{% endblock %}


{% block script %}

<script>
	var requestOptions = {
	  method: 'GET',
	  headers: {
	    "Authorization" : "Bearer {{ template_values['access_token'] }}"
	  },
	  credentials: 'include'
	};

	fetch("https://{{ template_values['user_base_url'] }}/api/v3.0/media/session", requestOptions)
	  .then(response => response.json() )
	  .then( body => fetch(body.url, requestOptions) )
	  .then( response => console.log("response status", response.status ) )
	  .catch(error => console.log('error', error));
</script>

{% endblock %}