{% import 'devices/macros.html' as macros %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link href="https://stackpath.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT"
        crossorigin="anonymous">
  <title>Devicehub | {{ device.__format__('t') }}</title>
</head>
<body>

<nav class="navbar navbar-default" style="background-color: gainsboro; margin: 0 !important">
  <div class="container-fluid">
    <a href="https://www.ereuse.org/" target="_blank">
      <img alt="Brand"
           class="center-block"
           style="height: 4em; padding-bottom: 0.1em"
           src="{{ url_for('Device.static', filename='ereuse-logo.svg') }}">
    </a>
  </div>
</nav>
<div class="jumbotron">
  <img class="center-block"
       style="height: 13em; padding-bottom: 0.1em"
       src="{{ url_for('Device.static', filename='magrama.svg') }}">
</div>
<div class="container">
  <div class="page-header">
    <h1>{{ device.__format__('t') }}<br>
      <small>{{ device.__format__('s') }}</small>
    </h1>
  </div>
</div>
<div class="container">
  <h2 class='text-center'>
    This is your {{ device.t }}.
  </h2>

  <p class="text-center">
    {% if device.trading %}
      {{ device.trading }}
    {% endif %}
    {% if device.trading and device.physical %}
      and
    {% endif %}
    {% if device.physical %}
      {{ device.physical }}
    {% endif %}
  </p>
  <div class="row">
    <article class="col-md-6">
      <h3>You can verify the originality of your device.</h3>
      <p>
        If your device comes with the following tag
        <img class="img-responsive center-block" style="width: 12em;"
             src="{{ url_for('Device.static', filename='photochromic-alone.svg') }}">
        it means it has been refurbished by an eReuse.org
        certified organization.
      </p>
      <p>
        The tag is special –illuminate it with the torch of
        your phone for 6 seconds and it will react like in
        the following image:
        <img class="img-responsive center-block" style="width: 30em;"
             src="{{ url_for('Device.static', filename='photochromic-tag-web.svg') }}">
        This is proof that this device is genuine.
      </p>
    </article>
    <article class="col-md-6">
      <h3>These are the specifications</h3>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
          <tr>
            <th></th>
            <th>Range</th>
          </tr>
          </thead>
          <tbody>
          {% if device.processor_model %}
            <tr>
              <td>
                CPU – {{ device.processor_model }}
              </td>
              <td>
                {% if device.rate %}
                  {{ device.rate.processor_range }}
                  ({{ device.rate.processor }})
                {% endif %}
              </td>
            </tr>
          {% endif %}
          {% if device.ram_size %}
            <tr>
              <td>
                RAM – {{ device.ram_size // 1000 }} GB
                {{ macros.component_type(device.components, 'RamModule') }}
              </td>
              <td>
                {% if device.rate %}
                  {{ device.rate.ram_range }}
                  ({{ device.rate.ram }})
                {% endif %}
              </td>
            </tr>
          {% endif %}
          {% if device.data_storage_size %}
            <tr>
              <td>
                Data Storage – {{ device.data_storage_size // 1000 }} GB
                {{ macros.component_type(device.components, 'SolidStateDrive') }}
                {{ macros.component_type(device.components, 'HardDrive') }}
              </td>
              <td>
                {% if device.rate %}
                  {{ device.rate.data_storage_range }}
                  ({{ device.rate.data_storage }})
                {% endif %}
              </td>
            </tr>
          {% endif %}
          {% if device.graphic_card_model %}
            <tr>
              <td>
                Graphics – {{ device.graphic_card_model }}
                {{ macros.component_type(device.components, 'GraphicCard') }}
              </td>
              <td></td>
            </tr>
          {% endif %}
          {% if device.network_speeds %}
            <tr>
              <td>
                Network –
                {% if device.network_speeds[0] %}
                  Ethernet
                  {% if device.network_speeds[0] != None %}
                    max. {{ device.network_speeds[0] }} Mbps
                  {% endif %}
                {% endif %}
                {% if device.network_speeds[0] and device.network_speeds[1] %}
                  +
                {% endif %}
                {% if device.network_speeds[1] %}
                  WiFi
                  {% if device.network_speeds[1] != None %}
                    max. {{ device.network_speeds[1] }} Mbps
                  {% endif %}
                {% endif %}
                {{ macros.component_type(device.components, 'NetworkAdapter') }}
              </td>
              <td></td>
            </tr>
          {% endif %}
          {% if device.rate %}
            <tr class="active">
              <td class="text-right">
                Total rate
              </td>
              <td>
                {{ device.rate.rating_range }}
                ({{ device.rate.rating }})
              </td>
            </tr>
          {% endif %}
          {% if device.rate and device.rate.price %}
            <tr class="active">
              <td class="text-right">
                Algorithm price
              </td>
              <td>
                {{ device.rate.price }}
              </td>
            </tr>
          {% endif %}
          {% if device.price %}
            <tr class="active">
              <td class="text-right">
                Actual price
              </td>
              <td>
                {{ device.price }}
              </td>
            </tr>
          {% endif %}
          </tbody>
        </table>
      </div>
      <h3>This is the traceability log of your device</h3>
      <div class="text-right">
        <small>Latest one.</small>
      </div>
      <ol>
        {% for event in device.events|reverse %}
          <li>
            <strong>
              {{ event.type }}
            </strong>
            —
            {{ event }}
            <br>
            <div class="text-muted">
              <small>
                {{ event._date_str }}
              </small>
            </div>
            {% if event.certificate %}
              <a href="{{ event.certificate.to_text() }}">See the certificate</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
      <div class="text-right">
        <small>Oldest one.</small>
      </div>
    </article>
  </div>
</div>

</body>
</html>