{% extends 'base.html' %}

{% block content %}

<div id="index" class="container">

  <div id="addnode" class="pure-g center section">
    <div class="title pure-u-1">
      <h2>Add A Node</h2>
    </div>
    <form method="POST" action="{{ url_for('add') }}" class="pure-form pure-u-1">
        {{ form.csrf_token }}
        {% for f in form %}
          {% if f.name != 'csrf_token' %}
            <div class="form-group">
              {{ f.label }}
              {{ f }}
            </div>
          {% endif %}
        {% endfor %}
        <ul>
        {% for field, errors in form.errors.items() %}
            <li>{{ form[field].label }}: {{ ', '.join(errors) }}</li>
        {% endfor %}
        </ul>
        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </form>
  </div>

  <div id="nodes" class="pure-u-1 section">
    <h2 class="center">Find a Node</h2>
    <br>
    {% if nodes %}
    <table class="pure-table pure-table-horizontal pure-table-striped">
      <thead>
        <tr>
          <th>URL</th>
          <th>Available</th>
          <th>Network</th>
          <th>Height</th>
          <th>Last Checked</th>
          <th>History</th>
        </tr>
      </thead>
      <tbody>
        {% for node in nodes %}
        <tr>
          <td>{% if node.is_tor %}<img src="/static/images/tor.svg" width="15px">{% endif %}{{ node.url }}</td>
          <td>
            {% if node.available %}
              <div class="icon-check" style="color:green;"></div>
            {% else %}
              <div class="icon-close" style="color:red;"></div>
            {% endif %}
          </td>
          <td>{{ node.nettype }}</td>
          <td>{{ node.last_height }}</td>
          <td>{{ node.datetime_checked | humanize }}</td>
          <td>{% for hc in node.healthchecks %}
            {% if loop.index > loop.length - 11 %}
            <span class="dot glowing-{% if hc.health %}green{% else %}red{% endif %}"></span>
            {% endif %}
          {% endfor %}
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% if page > 1 %}
      <a href="/?page={{ page - 1 }}" class="pure-button btn">Back</a>
    {% endif %}
    {% if page < total_pages and total_pages > 0 %}
      <a href="/?page={{ page + 1 }}" class="pure-button btn">Next</a>
    {% endif %}
    {% else %}
    <p>No nodes in the database yet...</p>
    {% endif %}
    <br>
    <div class="center" id="filters">
      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=mainnet"><button class="pure-button search-btn">Mainnet</button></a>
      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=testnet"><button class="pure-button search-btn">Testnet</button></a>
      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}nettype=stagenet"><button class="pure-button search-btn">Stagenet</button></a>
      {% if 'onion' not in request.args %}<a href="{% if 'nettype' in request.args or 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}onion=true"><button class="pure-button search-btn"><img src="/static/images/tor.svg" width=15px> Onion</button></a>{% endif %}
      <a href="/?crypto=wownero"><button class="pure-button search-btn wownero"><img src="/static/images/wownero.svg" width=50px></button></a>
      <br>
      <a href="/"><button class="pure-button search-btn button-warning">Clear</button></a>
    </div>
  </div>

</div>

{% endblock %}