
{% extends 'base.html' %}


{% block content %}
	<hr>
    <h1>{% block title %} Your Eisen Radio Recorder! {% endblock %}</h1>
	<hr>
        <div class="container">
          <div class="row">
            <div class="col-sm">


            </div>
            <div class="col-sm" style="text-align:center">
                <img src="static/images/frontpage/eisenposter480.png" alt="https://www.python.org/" style="width:479px;height:229px;">
            </div>
            <div class="col-sm" style="text-align:right">

            </div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-sm" style="text-align:center">

		<div class="progress follow-scroll" >
		  <div class="progress-bar bg-success" role="progressbar"
			   style="width: 25%"
			   aria-valuenow="25"
			   aria-valuemin="0"
			   aria-valuemax="100" id="progress_record_all"></div>
		</div>


            </div>

            <div class="col-sm" style="text-align:center">
				<form id="timer" action="#" method="post">
        <div class="container" >
            {% if combo_master_timer %}{% set timer=combo_master_timer %}{% endif -%}
            <label for="time_record_select_all"><b>Timer: <span class="badge badge-primary">{{timer}}</span> </b></label>

            <select class="form-select" aria-label="Default select"
                    name="time_record_select_all" id="time_record_select_all" onchange="setTimer(value)">

              <option class="" value="0" > No timer selected</option>

              <option class="" value="1" > 1</option>

              <option class="" value="2" > 2</option>

              <option class="" value="4" > 4</option>

              <option class="" value="6" > 6</option>

              <option class="" value="8" > 8</option>

              <option class="" value="12" > 12</option>

              <option class="" value="24" > 24</option>

            </select>

        </div>
        </form>


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

	<hr>
	{% set counter = 1 -%}
    {% for post in posts%}
		<!-- {% if not status_listen_btn_dict[post['id']] %}{% set listen_class='btn btn-primary' %} {% endif -%} -->
		<!-- {% if status_listen_btn_dict[post['id']] %}{% set listen_class='btn btn-danger' %} {% endif -%} -->

		{% if not status_record_btn_dict[post['id']] %}{% set record_class='btn btn-primary' %}{% endif -%}
		{% if status_record_btn_dict[post['id']] %}{% set record_class='btn btn-danger' %}{% endif -%}

		{% if not post['pic_comment'] %}{% set pic_comment='' %}{% endif -%}
		{% if post['pic_comment'] %}{% set pic_comment=post['pic_comment'] %}{% endif -%}

		<h5><b><a href="{{ url_for('post', post_id=post['id']) }}">{{ post['title'] }}</a></b></h5>
	<div class="pix">

		<img src="data:{{post['pic_content_type']}};base64, {{post['pic_data']}}"  alt="" style="max-width:150px;max-height:100px;">

		<a href="{{ url_for('edit', id=post['id']) }}">
			<span class="badge badge-warning">Edit</span></a>

		<span style="color:#95B9C7;"><b>{{ pic_comment }}</b></span>
	</div>

			   <!-- placeholder=Display_{{post['id']}} -->
		<input type="text"
				placeholder=Display_{{ counter + loop.index0 }}
				class="form-control"
				value="{{ request.form['title']}}"
				readonly="readonly" style="font-family:verdana;font-size:120%;"
				name=Display_{{post['id']}}
				id=Display_{{post['id']}}>

		<button class="{{record_class}}"
				name="Record_{{post['id']}}"
				id=Record{{post['id']}}>Record</button>

		<button class="{{listen_class}}"
				name="Listen_{{post['id']}}"
				id={{post['id']}}>Listen</button>

		<hr>
    {% endfor%}

		<div class="wrap" >



		</div>
		<div class="footer" style="position:fixed;bottom:0;display:block">
				<div id="div_audio_control_div"  style="display: block">

        		     <audio id=audio_with_controls
				     controls autoplay src="{{url}}"
				     >
					Not supported audio. Please use VLC or an other Browser.</audio>
				</div>
		</div>

<script>
		function setTimer(val) {

        	$.ajax({
                	type: 'POST',
                	url: "/index_posts_combo",
                	cache: false,
                	data: {'time_record_select_all': val}

        	});
        };
 </script>
 <script type="text/javascript"
         src="{{ url_for('static', filename='/jquery/jquery-3.6.0.min.js') }}"></script>
 <script type="text/javascript"
         src="{{ url_for('static', filename='/js/ea_index.js') }}"></script>
{% endblock %}
