{% extends "bootstrap/base.html" %}
{% block title %}First App Application for OpenStack{% endblock %}
{% from "bootstrap/pagination.html" import render_pagination %}

{% block content %}
{{render_pagination(fractals)}}
{% for fractal in fractals.items %}
<div class="row">
  <div class="col-xs-5 col-md-3">
    <a href="/fractal/{{ fractal.uuid }}" class="thumbnail">
      <img src="/fractal/{{ fractal.uuid }}" style="max-height: 300px; max-width: 300px">
    </a>
  </div>
  <div class="col-xs-7 col-md-9">
    <table class="table table-striped">
      <tbody>
        <tr>
          <td>UUID</td>
          <td>{{ fractal.uuid }}</td>
        </tr>
        <tr>
          <td>Duration</td>
          <td>{{ fractal.duration }} seconds</td>
        </tr>
        <tr>
          <td>Dimensions</td>
          <td>{{ fractal.width }} x {{ fractal.height }} px</td>
        </tr>
        <tr>
          <td>Iterations</td>
          <td>{{ fractal.iterations }}</td>
        </tr>
        <tr>
          <td>Parameters</td>
          <td>
            <pre>xa = {{ fractal.xa }}
xb = {{ fractal.xb }}
ya = {{ fractal.ya }}
yb = {{ fractal.yb }}</pre>
          </td>
        </tr>
        <tr>
          <td>Filesize</td>
          <td>{{ fractal.size}} bytes</td>
        </tr>
        <tr>
          <td>Checksum</td>
          <td><pre>{{ fractal.checksum }}</pre></td>
        </tr>
        <tr>
          <td>Generated by</td>
          <td>{{ fractal.generated_by }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
{% endfor %}
{{render_pagination(fractals)}}
<!-- requires POST request to have Content-Type: "application/vnd.api+json" header, would require Fetch API or XMLHTTPRequest etc.
<div>
  <form action="/v1/fractal" method="POST">
    <input type="submit" value="Create new fractals">
  </form>
</div>
-->
<div>
  Rendered by server: {{hostname}}
</div>
{% endblock %}