{% 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>
                  <p>This is a binding between:&nbsp;
                      <ul>
                          {% if new_placeholder.is_abstract %}
                          <li>1. Device abstract with DHID:<b>{{ new_placeholder.device.devicehub_id }}</b> and PHID: <b>{{ new_placeholder.phid }}</b></li>
                          <li>2. Device real with DHID: <b>{{ old_placeholder.device.devicehub_id }}</b> and PHID:<b>{{ old_placeholder.phid }}</b></li>
                          {% else %}
                          <li>1. Device abstract with DHID:<b>{{ old_placeholder.device.devicehub_id }}</b> and PHID: <b>{{ old_placeholder.phid }}</b></li>
                          <li>2. Device real with DHID: <b>{{ new_placeholder.device.devicehub_id }}</b> and PHID:<b>{{ new_placeholder.phid }}</b></li>
                          {% endif %}
                      </ul>
                  </p>
                </div>

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

                  <br />

                  {% if new_placeholder.device.components or old_placeholder.device.components %}
                  <h2>Components</h2>
                  <table class="table table-hover">
                      <thead>
                          <tr class="text-center">
                              <th scope="col">Info Twin device</th>
                              <th scope="col">Info Abstract device</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td class="table-success text-right">
                                  {% for c in new_placeholder.device.components %}
                                  * {{ c.verbose_name }}<br />
                                  {% endfor %}
                              </td>
                              <td class="table-danger">
                                  {% for c in old_placeholder.device.components %}
                                  * {{ c.verbose_name }}<br />
                                  {% endfor %}
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  {% endif %}

                  <br />

                  {% if actions %}
                  <h2>Actions</h2>
                  <table class="table table-hover">
                      <thead>
                          <tr class="text-center">
                              <th scope="col">Info Twin device</th>
                              <th scope="col">Info Abstract device</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td class="table-success text-right">
                                  {% for a in actions %}
                                  * {{ a.t }}<br />
                                  {% endfor %}
                              </td>
                              <td class="table-danger">
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  {% endif %}

                  <br />

                  {% if tags %}
                  <h2>Tags</h2>
                  <table class="table table-hover">
                      <thead>
                          <tr class="text-center">
                              <th scope="col">Info Twin device</th>
                              <th scope="col">Info Abstract device</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td class="table-success text-right">
                                  {% for tag in tags %}
                                  * {{ tag.id }}<br />
                                  {% endfor %}
                              </td>
                              <td class="table-danger">
                              </td>
                          </tr>
                      </tbody>
                  </table>
                  {% endif %}

                  <div>
                    <form method="post">
                      <a href="{{ url_for('inventory.device_details', id=dhid) }}" 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 %}