
{% extends 'bp_home_base.html' %}


{% block content %}

	<hr>
	<h1>{% block title %} Your Eisen Radio! {% endblock %}</h1>
	<hr>

		<div class="pixies">
			<img src="   {{ url_for('eisenhome_bp.static', filename='/images/frontpage/eisenposter350.png') }}"
				 srcset="{{ url_for('eisenhome_bp.static', filename='/images/frontpage/eisenposter350.png') }} 480w,
				 		 {{ url_for('eisenhome_bp.static', filename='/images/frontpage/eisenposter620.png') }} 720w,
				 		 {{ url_for('eisenhome_bp.static', filename='/images/frontpage/eisenposter950.png') }} 1080w"
				 alt="">
		</div>

		<p id="scroll_top"
		   style="scroll-margin-top: 50px;visibility:hidden"></p>

		<div class="progress" style="position: relative;">
		  <div class="progress-bar bg-success"
			   role="progressbar"
			   id="progress_record_all"
			   style=" width: 25%; position: absolute;z-index: 1;"
			   aria-valuenow="25"
			   aria-valuemin="0"
			   aria-valuemax="100"
			   >
		  </div>
		</div>

		<div class="wrapper-select-boxes" style="margin-bottom:0px;margin-top:0px;">

			<table border=0 style="width:25%;margin-left:auto; margin-right:auto; 
								border-collapse: separate; border-spacing: 15px;">
			<tr>
				<td style="vertical-align:bottom;">

				{% if combo_master_timer %}{% set timer=combo_master_timer %}{% endif -%}
				<label for="time_record_select_all"></label>
				<select class="form-control" aria-label="Timer select"
						name="time_record_select_all" 
						id="time_record_select_all" 
						style="width:auto;"
						onchange="setTimer(value)">

						<option class="" value="0" >timer off</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>

				</td>
				<td style="vertical-align:bottom;">

			    <label for="body_color_select_all"></label>
                <select class="form-control" aria-label="dark mode select"
                        name="body_color_select_all" 
			    		id="body_color_select_all" 
			    		style="width:auto;" 
			    		onchange="setColor(value)">
			    
                  <option class="" value="" > dark mode </option>
                  <option class="" value="#f9f9f9" > off</option>
                  <option class="" value="#1a1a1a" > on</option>
                </select>

				</td>
			</tr>
		</table>
        </div>


    {% 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 -%}
		<hr>

	   <div class="table-pic-edit-note" style="margin-bottom:4px;">

			<table border=0 style="width:100%;border-spacing:10px;">
			<tr>
				<td>
					<div  style=" scroll-margin-top: 60px;float: left;" id=dot_{{post['id']}}></div>
						<span class="dot-for-radio-headline">&#8231;&nbsp;
						</span>


						<span class="radio-station-headline">
							{{ post['title'] }}
						</span>

				</td>
				<td colspan="2">

					<div style="width: 100%; overflow: hidden;">
     							<div style="width: 10px; float: left;"></div>
     							<div >
									<span class="ghetto-measurements-name"
										id=icy_name_{{post['id']}}>
									</span>
								</div>
					</div>

				</td>
			</tr>
			<tr>
				<td width=202>
					<div class="pixies">
					<a href="{{ url_for('eisenutil_bp.post', post_id=post['id']) }}">
						<img class="pix" src="data:{{post['pic_content_type']}};base64, {{post['pic_data']}}"  
									alt="" style=" margin-bottom:2px; max-width:200px;max-height:150px;">
					</a>
					</div>
				</td>
				<td style="vertical-align:bottom;text-align:left;">

					<span class="ghetto-measurements-upper"
						  id=request_suffix_{{post['id']}}>
					</span>
					<span class="ghetto-measurements-upper"
						  id=request_icy_br_{{post['id']}}>
					</span>
					<span class="ghetto-measurements-upper"
						  id=request_time_{{post['id']}}>
					</span>

					<p style="height:20px;"></p>

					<div class="ghetto-measurements-upper">
					<a href="{{ url_for('eisenutil_bp.edit', id=post['id']) }}">
						<span class="badge badge-warning" style=" margin-left: 10px; margin-right: 10px; margin-bottom:2px;opacity:.7;">Edit</span></a>
					</div>
				</td>
				<td style="vertical-align:bottom;">
					<div class="radio-station-comment">
						<span style=" margin-bottom:2px;">{{ pic_comment }}</span>
					</div>
				</td>
			</tr>
			
			</table>
		</div>

		<div class="station-display" id="station-display-id">
			   <!-- placeholder=Display_{{post['id']}} -->
			<input type="text"
				placeholder=Display_{{ loop.index0 + 1}}
				value="{{ request.form['title']}}"
				readonly="readonly"
				name=Display_{{post['id']}}
				id=Display_{{post['id']}}
				class="form-control">
				
		</div>
	   <div class="table-buttons-radio-li" style="margin-top:4px;">

			<table border=0 style="width:100%;border-spacing:10px;">
			<tr>
				<td style=" width:200px; vertical-align:top;">
					<!-- Buttons 																Buttons-->
					<div class="button-rec-lis" style="margin-bottom:0px;margin-top:0px;margin-left:0px;">
						<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>
					</div>

				</td>
				<td>

					<div class="ghetto-measurements-bottom"
						 id=request_icy_genre_{{post['id']}}>
					</div>

				</td>
			</tr>
			</table>
	   </div>


	<!--	<hr> -->
    {% endfor%}


		<div class="push-up"
			 id="scroll_bottom"
			 style="height:75px;">
		</div>

	<div id="footer-wrapper" class="who-knows-when-it-will-be-used">

		<div class="footer">
			<div class="wrap-footer-table" style="">

			<table border=0 style="width:100%;margin-bottom:0px;border-collapse: collapse;">
				<tr>
					<td style="vertical-align:bottom;">

						{% if current_station %}{% set station=current_station %}{% endif -%}
						{% if current_table_id %}{% set station_id=current_table_id %}{% endif -%}
						<div class="master-display" >
					 		<p id="lbl_div_audio"></p>
						</div>
					</td>

					<td style="vertical-align:bottom;text-align:right;width:45x;height:45px;">
						<a href="#scroll_top"
						   id="arrow-up"><span >▲</span>
						</a>
					</td>
					<td style="vertical-align:bottom;text-align:right;width:45px;height:45px;">
						<a href="#scroll_bottom"
						   id="arrow-down"><span >▼</span>
						</a>
					</td>

					<td>


                 		<form action="" name="CACHE" >
                 		    <select  class="form-control"
									  id="cacheList"
									  onChange="location = this.value;cacheList.options[0].selected = true;">
                 		        <option id="cacheList0" value="sw">(ಠ_ಠ)</option>
                 		    </select>
                 		</form>

					</td>

				</tr>

				<tr>
					<td colspan="3" style="vertical-align:bottom;">
						{% if listen_last_url %}{% set url=listen_last_url %}{% endif -%}
        		     		<audio controls autoplay id="audio_with_controls"
								   style="display : block;"
				      			src={{url}}>
								Not supported audio. Please use VLC or another Browser.
							</audio>
					</td>

					<td></td>

				</tr>
			</table>
			</div>
		</div>
	</div>

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

{% endblock %}

