{% extends "layout.html" %}
{% block body %}

<div style="width: 1000px; height: 100%;">

<p><b>How would you like to install Debian?</b></p>

<br>

<div class="radios">
  <label class="radio">
    <input type="radio" name="rsvp" />
    Erase entire disk
  </label>
  <label class="radio">
    <input type="radio" name="rsvp" />
    Install alongside another operating system
  </label>
  <label class="radio">
    <input type="radio" name="rsvp" disabled />
    Edit existing partitions
  </label>
</div>

<br>

<div class="columns" width="100%">
	<div class="column"><p> Proposed layout: </p></div>
	<div style="position: absolute; right: 15px;">
        	<div class="column is-link"><button class="button iis-info"> <img src="/static/icons/tab-new-symbolic.svg"> &nbsp; Add Disk or Filesystem </button></div>
	</div>
</div>
<div style=""> <!-- partition bars -->
<div style="background-color: gray; padding: 10px; border-radius: 10px;">
<p> <span style="width: 100%;" class="tag is-black">Physical disk: TOSHIBA HDWD120 (2000 GB) <br>
<div class="columns">
  <div class="column is-narrow is-primary">
    <div class="box" style="min-width: 220px;">
    <p class="is-tiny">/dev/sda1</p>
    <p class="title is-5"><span class="tag is-black">/boot/efi</span>
    <span class="tag is-dark">200 MB</span>
    <span class="tag is-link">vfat</span>
    </p>
  </div>
</div>
  <a hx-get="/disks/partition/sda" hx-swap="outerHTML"/>
  <div class="column">
    <div class="box">
      <p class="is-tiny">/dev/sda2</p>
      <p class="title is-5"><span class="tag is-black">/</span> <span class="tag is-dark">18 GB</span> <span class="tag is-link">btrfs</span></p>
    </div>
  </a>
  </div>
</div>
</div>

<br><br>

<div style="background-color: gray; padding: 10px; border-radius: 10px;">
<p> <span style="width: 100%;" class="tag is-black">Physical disk: TOSHIBA HDWD120 (2000 GB) <br>
<div class="columns">
  <div class="column is-narrow is-primary">
    <div class="box" style="width: 220px;">
    <p class="is-tiny">/dev/sda1</p>
    <p class="title is-5"><span class="tag is-black">/boot/efi</span>
    <span class="tag is-dark">200 MB</span>
    <span class="tag is-link">vfat</span>
    </p>
  </div>
</div>
  <a hx-get="/disks/partition/sda" hx-swap="outerHTML"/>
  <div class="column">
    <div class="box">
      <p class="is-tiny">/dev/sda2</p>
      <p class="title is-5"><span class="tag is-black">/</span> <span class="tag is-dark">18 GB</span> <span class="tag is-link">btrfs</span></p>
    </div>
  </a>
  </div>
</div>
</div>
</div> <!-- end partition bars -->


<br>

<p> There are {{ blockdevs["blockdevices"]|count }} block devices detected. </p>
<p> They are </p>
<br>

{% for disk in blockdevs["blockdevices"] %}
<p> Diskname: {{ disk['name'] }} </p>
<p> Model: {{ disk['model'] }} </p>
<p> Serial: {{ disk['serial'] }} </p>
<p> Removable: {{ disk['rm'] }} </p>
<p> Size: {{ (disk['size'] | int) / 1024000000 | round(2) }} GiB </p>
<p> ID: {{disk['id'] }} </p>
<p> pttype: {{disk['pttype'] }} </p>
<p> Maj:min: {{disk['maj:min']}} </p>
<p> phy-sec: {{ disk['phy-sec'] }}. log-sec: {{ disk['log-sec'] }} </p>
<p> There are {{ disk['children']|count }} Children </p>
{% for child in disk['children'] %}
<br>
<p> Name: {{ child['name'] }}. Path: {{ child['path'] }}. {{ child['size'] }}. Block: {{ child['subsystems'] }} {{ child['maj:min'] }} {{ child['type'] }} </p>
<p> Fstype: {{ child['fstype'] }}. Label: {{ child['label'] }}. Rota: {{ child['rota'] }}</p>
<p> Parttypename: {{ child['parttypename'] }}
<br>
{% endfor %}
<br>
{% endfor %}

<!-- Add Undetected Disk
     Add Virtual Filesystem
     Add Network Filesystem -->


<div> <!-- Disks and Partitions Content -->

<br><br>

    <div class="columns">
      <div class="column"><button class="button is-light">Cancel</button></div>
      <div class="column"><button class="btn primary" hx-trigger="click, keyup[altKey&&shiftKey&&key=='D'] from:body"
		              hx-post="/">Do It! (alt-shift-D)</button></div>
      <a href="/software">
	      <div class="column"><button hx-src='html' class="button is-link" hx-trigger="click, keyup[altKey&&shiftKey&&key=='N'] from:body" hx-get="/software">Co<u>n</u>tinue</button></div></a>
    </div>
  </div>
</div>
</div>

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

{% endblock %}