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

<div style="">

<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>

<div class="columns" width="100%">
	<div class="column"><p> Current layout: </p></div>
	<div style="position: static; 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=""> 
<div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
<p> <span style="width: 100%; border-radius: 8px 8px 0 0;" 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; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px;">
    <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" style="border-radius: 0 0 5px 0px; height: 60px; padding-top: 5px;">
      <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>
</div> 
-->

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

{% for disk in blockdevs["blockdevices"] %}

<div style=""> <!-- partition bars -->
<div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
<p> <span style="width: 100%; border-radius: 8px 8px 0 0;" class="tag is-black">
    <small><small>{{ disk['name'] }} ({{(disk['size']/1024000000)|round(0)|int }} GB) - Serial: {{ disk['serial'] }}</small></small>
<div class="columns">
{% for child in disk['children'] %}
  <a hx-get="/disks/partition/sda" hx-swap="outerHTML"/>
  <div class="column is-narrow is-primary">
    <div class="box" style="min-width: 220px; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px;">
    <p class="is-tiny">{{ child['name'] }} ({{ (child['size']/1024000000)|round(2) }} GiB)  </p>
    <p class="title is-5"><span class="tag is-black">/boot/efi</span>
    <span class="tag is-link">vfat</span>
    </p>
    </div>
  </div>
  </a>
{% endfor %}
  {% if disk['maj:min'] == "252:0" %}
  <div class="column is-narrow is-primary">
    <div class="box" style="width: 100%; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px; right: 0px;">
    <p class="is-tiny"> {{ disk['name'] }} ({{ (disk['size']/1024000000)|round(2) }} GiB)  </p>
    <p class="title is-5"><span class="tag is-black">/dev/{{ disk['name'] }}</span>
    <span class="tag is-link">swap</span>
    </p>
    </div>
    </div>
  {% endif %}
</div>
</div>

<!--
<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>
</div>

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

{% endblock %}