
{% extends 'base.html' %}


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


            </div>
            <div class="pixies" style="text-align:center">
            	<img src="static/images/frontpage/eisenposter350.png"
					 srcset="static/images/frontpage/eisenposter350.png 480w,
					 		static/images/frontpage/eisenposter620.png 720w,
					 		static/images/frontpage/eisenposter950.png 1080w"
					 alt="">
			</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" >
		  <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 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="Timer 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>
			
			<label for="body_color_select"><b>dark:</b></label>
            <select class="form-select" aria-label="dark mode select"
                    name="body_color_select_all" id="body_color_select_all" onchange="setColor(value)">

              <option class="" value="#f9f9f9" > off</option>

              <option class="" value="#1a1a1a" > on</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>

<table border=0 style="width:100%;border-spacing:10px;">
  <tr>
    <td width=200 cellpadding=20 >
      	<div class="pixies">
		  <a href="{{ url_for('post', post_id=post['id']) }}">
			<img class="pix" src="data:{{post['pic_content_type']}};base64, {{post['pic_data']}}"  
						alt="" style="max-width:200px;max-height:130px;">
		  </a>
		</div>
    </td>
    <td width=50 cellpadding=20 style="vertical-align:bottom;">
      	<div class="edit">
		<a href="{{ url_for('edit', id=post['id']) }}">
			<span class="badge badge-warning">Edit</span></a>
		</div>
    </td>
    <td cellpadding=20 style="vertical-align:bottom;">
			<span style="color:#95B9C7;"><b>{{ pic_comment }}</b></span>
    </td>
  </tr>

</table>


			   <!-- placeholder=Display_{{post['id']}} -->
		<input type="text"
				placeholder=Display_{{ counter + loop.index0 }}
				value="{{ request.form['title']}}"
				readonly="readonly" style="font-family:verdana;font-size:120%;"
				name=Display_{{post['id']}}
				id=Display_{{post['id']}}
				class="form-control">
		<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">
				{% if current_station %}{% set station=current_station %}{% endif -%}
				<label for="div_audio_control_div" id="lbl_div_audio">*{{station}}</label>
				{% if listen_last_url %}{% set url=listen_last_url %}{% endif -%}
				<div id="div_audio_control_div" style="bottom:0;position=relative;">
	
        		     <audio controls autoplay id=audio_with_controls
				      src={{url}}>
					Not supported audio. Please use VLC or another 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>
		function setColor(val) {

					var bodyStyles = document.body.style;
					bodyStyles.setProperty('--background-color', val);
					console.log('setColor: '+val);
					if (val == '#1a1a1a') {
                        bodyStyles.setProperty('--form-background', '#333333');
						bodyStyles.setProperty('--form-text', '#f3f3f3');
						bodyStyles.setProperty('--hr-color', '#000000');
						bodyStyles.setProperty('--border-color', '#000000');
						bodyStyles.setProperty('--text-color', '#cccccc');
						bodyStyles.setProperty('--form-edit', '#333333');
						bodyStyles.setProperty('--opacity', '0.3');
						bodyStyles.setProperty('--footer-color', '#1a1a1a');
                        }
					if (val != '#1a1a1a') {
                        bodyStyles.setProperty('--form-background', '#f3f3f3');
						bodyStyles.setProperty('--form-text', '#000000');
						bodyStyles.setProperty('--hr-color', '#eee');
						bodyStyles.setProperty('--border-color', '#eee');
						bodyStyles.setProperty('--text-color', '#f2f2f2');
						bodyStyles.setProperty('--form-edit', '#eee');
						bodyStyles.setProperty('--opacity', '1');
						bodyStyles.setProperty('--footer-color', 'brown');
                        }
        };
 </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 %}
