<!DOCTYPE html>
<head>
<title>RPi Web Server</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-->
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">
</head>
<body>
<div id="master_remote">
<div class="left_col">
<h2>Videopi commander</h2>
<p id="status_all">{{status_message}}</p>
<p id="filelist">No files.</p>
</div>
<div class="right_col">
<p class="buttons">
<button value="/scan" class="command btn btn-block btn-lg btn-default" role="button">🔍<span class="btn_txt">Scan<br/>réseau</span></button>
<button value="/all/previous" class="command btn btn-block btn-lg btn-default" role="button">⏮<span class="btn_txt">Préc.</span></button>
<button value="/all/play" class="command btn btn-block btn-lg btn-default" role="button">⏵<span class="btn_txt">Lecture</span></button>
<button value="/all/pause" class="command btn btn-block btn-lg btn-default" role="button">⏸<span class="btn_txt">Pause</span></button>
<button value="/all/stop" class="command btn btn-block btn-lg btn-default" role="button">⏹<span class="btn_txt">Stop</span></button>
<button value="/all/next" class="command btn btn-block btn-lg btn-default" role="button">⏭<span class="btn_txt">Suivant</span></button>
<button value="/all/repeat" class="command btn btn-block btn-lg btn-default" role="button">🔂<span class="btn_txt">Répéter<br/>élem.</span></button>
<button value="/all/loop" class="command btn btn-block btn-lg btn-default" role="button">🔁<span class="btn_txt">Boucler<br/>liste</span></button>
<button value="/all/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>listes</span></button>
<button value="/all/enqueue/tst.mp4" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">tst.mp4</span></button>
<button value="/all/enqueue/tst1.mp4" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">tst1.mp4</span></button>
<button value="/move" class="command btn btn-block btn-lg btn-default" role="button">β<span class="btn_txt">movePl</span></button>
</p>
</div>
</div>
{% for host in hosts %}
<div class="client_container" id="{{ host }}">
<div class="left_col">
<div class="col_1">
<h2>{{ host }}</h2>
<button value="/{{host}}/poweroff" class="command btn btn-block btn-lg btn-default" role="button">⏻<span class="btn_txt">Éteindre</span></button>
<button value="/{{host}}/reboot" class="command btn btn-block btn-lg btn-default" role="button">↺<span class="btn_txt">Redémarrer</span></button>
<p id="status_{{ host }}">{{status_message}}</p>
<p id="signal_{{ host }}">
<span style="">Signal:</span>
<span class="wl_indicator" id="wl_0"></span>
<span class="wl_indicator" id="wl_1"></span>
<span class="wl_indicator" id="wl_2"></span>
<span class="wl_indicator" id="wl_3"></span>
</p>
<p id="loop_ind_{{ host }}" class="indicator">Loop</p>
<p id="repeat_ind_{{ host }}" class="indicator">Repeat</p>
</div>
<div class="col_2">
<p id="playlist_{{ host }}">No files queued.</p>
</div>
</div>
<div class="right_col">
<div class="timeline"></div>
<p class="buttons">
<button value="/{{host}}/previous" class="command btn btn-block btn-lg btn-default" role="button">⏮<span class="btn_txt">Préc.</span></button>
<button value="/{{host}}/play" class="command btn btn-block btn-lg btn-default" role="button">⏵<span class="btn_txt">Lecture</span></button>
<button value="/{{host}}/pause" class="command btn btn-block btn-lg btn-default" role="button">⏸<span class="btn_txt">Pause</span></button>
<button value="/{{host}}/stop" class="command btn btn-block btn-lg btn-default" role="button">⏹<span class="btn_txt">Stop</span></button>
<button value="/{{host}}/next" class="command btn btn-block btn-lg btn-default" role="button">⏭<span class="btn_txt">Suivant</span></button>
<button value="/{{host}}/repeat" class="command btn btn-block btn-lg btn-default" role="button">🔂<span class="btn_txt">Répéter<br/>élem.</span></button>
<button value="/{{host}}/loop" class="command btn btn-block btn-lg btn-default" role="button">🔁<span class="btn_txt">Boucler<br/>liste</span></button>
<button value="/{{host}}/clear" class="command btn btn-block btn-lg btn-default" role="button">X<span class="btn_txt">Vider<br/>liste</span></button>
<button id="toggle_val_{{host}}}" value="/{{host}}/sort/1/id" class="command btn btn-block btn-lg btn-default" role="button">🔀<span class="btn_txt">Trier<br/>liste</span></button>
</p>
</div>
</div>
{% endfor %}
</body>
<script type="text/javascript" src="{{url_for('static', filename='script.js')}}"></script>
</html>