{% extends 'layout.twig' %}

{% block scripts %}
<script src="./js/storage.js" charset="utf-8"></script>
{% endblock %}

{% block content %}

<header class="row">
  <div class="columns twelve u-text-center">
    <h1>Storage Device Info</h1>
    <select id="diskSelector"></select>
  </div>
</header>

<section class="row">
  <h5>Device Model: <span id="diskInfo">Loading...</span></h5>
  <table class="hardware-info">
    <tbody>
      <tr>
        <td>Disk Path</td>
        <td><span id="diskPath">N/a</span></td>
      </tr>
      <tr>
        <td>Device Type</td>
        <td><span id="diskType">N/a</span></td>
      </tr>
      <tr>
        <td>Capacity</td>
        <td><span id="diskSize">N/a</span></td>
      </tr>
      <tr>
        <td>Vendor</td>
        <td><span id="diskVendor">N/a</span></td>
      </tr>
    </tbody>
  </table>
</section>

<section class="row">
  <div class="columns twelve">
    <a href="index.html">Back</a>
  </div>
</section>

{% endblock %}