{% extends "ereuse_devicehub/base_site.html" %}
{% block main %}

<div class="pagetitle">
  <h1>{{ title }}</h1>
  <nav>
    <ol class="breadcrumb">
      <!-- TODO@slamora replace with lot list URL when exists -->
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section profile">
  <div class="row">
    <div class="col-xl-12">

      <div class="card">
              <div class="card-body">

                <div class="pt-4 pb-2">
                  <h5 class="card-title text-center pb-0 fs-4">{{ title }}</h5>
                  <p class="text-center">Please check that the information is correct.</p>
                </div>

                  <table class="table table-hover">
                      <thead>
                          <tr class="text-center">
                              <th scope="col">Basic Data</th>
                              <th scope="col">Info Abstract device</th>
                              <th scope="col">Info Real device</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <th scope="row">Manufacturer:</th>
                              <td class="table-success">{{ placeholder.binding.manufacturer or '' }}</td>
                              <td class="table-warning text-right">{{ placeholder.device.manufacturer or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Model:</th>
                              <td class="table-success">{{ placeholder.binding.model or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.model or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Serial Number:</th>
                              <td class="table-success">{{ placeholder.binding.serial_number or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.serial_number or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Brand:</th>
                              <td class="table-success">{{ placeholder.binding.brand or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.brand or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Sku:</th>
                              <td class="table-success">{{ placeholder.binding.sku or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.sku or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Generation:</th>
                              <td class="table-success">{{ placeholder.binding.generation or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.generation or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Version:</th>
                              <td class="table-success">{{ placeholder.binding.version or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.version or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Weight:</th>
                              <td class="table-success">{{ placeholder.binding.weight or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.weight or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Width:</th>
                              <td class="table-success">{{ placeholder.binding.width or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.width or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Height:</th>
                              <td class="table-success">{{ placeholder.binding.height or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.height or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Depth:</th>
                              <td class="table-success">{{ placeholder.binding.depth or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.depth or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Color:</th>
                              <td class="table-success">{{ placeholder.binding.color or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.color or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Production date:</th>
                              <td class="table-success">{{ placeholder.binding.production_date or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.production_date or '' }}</td>
                          </tr>
                          <tr>
                              <th scope="row">Variant:</th>
                              <td class="table-success">{{ placeholder.binding.variant or '' }}</td>
                              <td class="table-warning">{{ placeholder.device.variant or '' }}</td>
                          </tr>
                      </tbody>
                  </table>

                  <br />

                  {% if placeholder.components %}
                  <h2>Components</h2>
                  <table class="table table-hover">
                      <thead>
                          <tr class="text-center">
                              <th scope="col">Info Abstract device</th>
                              <th scope="col">Info Real device</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td class="table-success">
                              </td>
                              <td class="table-warning text-right">
                                  {{ placeholder.components  or ''}}
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  {% endif %}

                  <br />

                  {% if placeholder.device.manual_actions or placeholder.binding.manual_actions %}
                  <h2>Actions</h2>
                  <p>
                      The actions will become real device and will no longer be in the abstract
                  </p>
                  <table class="table table-hover">
                      <thead>
                          <tr class="text-center">
                              <th scope="col">Info Abstract device</th>
                              <th scope="col">Info Real device</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td class="table-success">
                                  {% for a in placeholder.binding.manual_actions %}
                                  * {{ a.t }}<br />
                                  {% endfor %}
                              </td>
                              <td class="table-danger text-right">
                                  {% for a in placeholder.device.manual_actions %}
                                  * {{ a.t }}<br />
                                  {% endfor %}
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  {% endif %}

                  {% if placeholder.device.tags %}
                  <h2>Tags</h2>
                  <p>
                      The tags will become real device and will no longer be in the abstract
                  </p>
                  <table class="table table-hover">
                      <thead>
                          <tr class="text-center">
                              <th scope="col">Info Abstract device</th>
                              <th scope="col">Info Real device</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td class="table-success">
                              </td>
                              <td class="table-danger text-right">
                                  {% for a in placeholder.device.tags %}
                                  * {{ a.t }}<br />
                                  {% endfor %}
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  {% endif %}

                  <div>
                    <form method="post">
                      <a href="{{ url_for('inventory.device_details', id=placeholder.device.devicehub_id) }}" class="btn btn-danger">Cancel</a>
                      <button class="btn btn-primary" type="submit">Confirm</button>
                    </form>
                  </div>

              </div>

      </div>

    </div>

    <div class="col-xl-8">
    </div>
  </div>
</section>
{% endblock main %}