{% extends "base.html" %}

{% load static %}


{% block title %}{{rom.name}}{% endblock %}
{% block nav_rom_class %}is-active{% endblock %}


{% block content %}
<div class="rom-overview">
	<div class="columns">
		<div class="column">
			<div class="box">
				<h2 class="title is-2">{{rom.id}} - {{rom.name}}</h2>
				{% if rom.user.id == user.id %}
				<div class="columns less-margin">
					<div class="column">
						<a href="{% url 'romupdate' id=rom.id %}"><i class="fa fa-pencil"></i> Rom bearbeiten</a>
					</div>
				</div>
				{% endif %}
				<div class="columns less-margin">
					<div class="column">
						hochgeladen von <strong>{{rom.user.username}}</strong>
						{% if rom.user.twitter %}
							<a target="_blank" href="https://twitter.com/{{rom.user.twitter}}"><i class="fa fa-twitter"></i></a>
						{% endif %}
						{% if rom.user.github %}
							<a target="_blank" href="https://github.com/{{rom.user.github}}"><i class="fa fa-github"></i></a>
						{% endif %}
						am {{rom.creation_time}}.
						Zuletzt geupdated am {{rom.edit_time}}<br/>

						{% for tag in rom.tags.all %}
						<a href="{% url 'romlist' tag=tag.slug %}"><span class="tag is-medium categorie is-primary">{{tag.name}}</span></a>
						{% endfor %}
						<br/><br/>
						{{rom.description|linebreaks}}
						<br/><br/>
						<div class="tabs is-boxed">
						  <ul>
						    <li class="is-active" data-for-id="wifi-tab">
						      <a>
						        <span class="icon is-small"><i class="fa fa-wifi"></i></span>
						        <span>Flashen per Wifi</span>
						      </a>
						    </li>
						    <li data-for-id="manual-tab">
						      <a>
						        <span class="icon is-small"><i class="fa fa-usb"></i></span>
						        <span>Manuell flashen</span>
						      </a>
						    </li>
						</ul>
						</div>
						<div id="wifi-tab" class="tab-body">
							<ol>
								<li>Versetze das Badge in Bootloadermodus</li>
								<li>
									Wähle die Rom-ID:
									<h3 class="title is-3">{{rom.id|stringformat:"04d"}}</h3>
								</li>
								<li>Wähle den Ziel-Slot</li>
								<li>Warte auf den Neustart</li>
							</ol>
						</div>
						<div id="manual-tab" class="tab-body">
							<ol>
								<li>
									Zielslot auswählen:
									<div class="field">
									  <p class="control">
									    <span class="select">
									      <select id="slot-select">

									      </select>
									    </span>
									  </p>
									</div>
									<div class="notification is-danger" id="rom0-warning">
										Warnung: In diesem Slot liegt der Boot-Selektor.<br/>
										Wird der überschrieben wird kann man nicht mehr einfach zwischen den ROMs wechseln.
										Wenn du den Boot-Selektor behalten willst, wähle einen anderen Slot.
									</div>
									<br/>
								</li>
								<li>
									Rom herunterladen <a id="rom-link" href="#">kein Slot gewählt</a>
								</li>
								<li>
									Flash:
									<code id="flash-command"></code>
								</li>
								<li>Badge in den neuen Rom booten</li>
							</ol>
						</div>

					</div>
					<div class="column  is-one-third">
						<img src="{% get_media_prefix %}/{{rom.cover.large}}"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
var rom_infos = {
	0x002000: { lable: "rom0 0x002000", is_low: true},
	0x082000: { lable: "rom1 0x082000", is_low: false},
	0x102000: { lable: "rom1 0x102000", is_low: true},
	0x182000: { lable: "rom3 0x182000", is_low: false},
	0x202000: { lable: "rom4 0x202000", is_low: true},
	0x282000: { lable: "rom5 0x282000", is_low: false},
};

var low_url = '{{rom.low_binary.url}}';
var high_url = '{{rom.high_binary.url}}';

$(document).ready(function() {
	$("#manual-tab").hide();

	$(".tabs li").click(function() {
		$(".tabs .is-active").removeClass("is-active");
		$(this).addClass("is-active");

		$(".tab-body").hide();
		active_tab = $(this).attr("data-for-id");
		$("#" + active_tab).show();
	});

	for(addr in rom_infos) {
		$("#slot-select").append('<option value="' + addr + '">' + rom_infos[addr].lable + '</option>')
	}

	function setSlot(addr) {
		var rom = rom_infos[addr];
		var url = '';

		if(rom.is_low) {
			url = low_url;
		}
		else {
			url = high_url;
		}

		var parts = url.split('/');
		var filename = parts[parts.length-1];

		$('#rom-link').text(url);
		$('#rom-link').attr('href', url);

		if(addr === 0x002000) {
			$("#rom0-warning").show();
		}
		else {
			$("#rom0-warning").hide();
		}

		command = 'esptool.py write_flash 0x' + addr.toString(16) + ' ' + filename;
		$("#flash-command").text(command);
	}

	setSlot(0x082000);
	$('#slot-select').val(0x082000);

	$("#slot-select").change(function() {
		setSlot(parseInt($('#slot-select').val()));
	});
});
</script>
{% endblock %}