{% 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>
    <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>
      <a href="{% if 'crypto' in request.args %}{{ request.url }}&{% else %}/?{% endif %}web_compatible=true"><button class="pure-button search-btn">Web</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>
      <a href="/"><button class="pure-button search-btn button-warning" style="border: dashed red;">x Clear</button></a>
    </div>
    <br>
    {% if nodes %}
    <div class="xmrnodes">
      <p class="center">
        {% if web_compatible %}
        <strong>
          Web compatible means the node is run in such a way that it allows web clients to access their APIs (CORS headers allow all and secure HTTP / TLS terminated).
          <br>
          The more nodes there are running with these settings the more robust web clients will be in the future.
        </strong>
        <br><br>
        {% endif %}
        Tracking {{ nodes_all }} {{ nettype }} {{ crypto | capitalize }} nodes in the database.
        <br>
        Of those, {{ nodes_unhealthy }} nodes failed their last check-in (unresponsive to ping or over 100 blocks away from highest reported block).
      </p>
      <p class="center">Showing {{ nodes | length }} nodes.
        {% if 'all' not in request.args %}
        <a href="{% if request.args %}{{ request.url }}&{% else %}?{% endif %}all=true">Show All</a>
        {% else %}
        <a href="{{ request.path }}?{{ request.args | pop_arg('all') }}">Show Active</a>
        {% endif %}
      </p>
      <br>
      <table class="pure-table pure-table-horizontal pure-table-striped js-sort-table">
        <thead>
          <tr>
            <th class="js-sort-string">URL</th>
            <th class="js-sort-number">Height</th>
            <th class="js-sort-none">Available</th>
            <th class="js-sort-none">Web<br/>Compatible</th>
            <th class="js-sort-none">Network</th>
            <th class="js-sort-none">Date Added</th>
            <th class="js-sort-none">Last Checked</th>
            <th class="js-sort-none">History</th>
          </tr>
        </thead>
        <tbody>
          {% for node in nodes %}
          <tr class="js-sort-table">
            <td>{% if node.is_tor %}<img src="/static/images/tor.svg" width="15px">{% endif %}{{ node.url }}</td>
            <td>{{ node.last_height }}</td>
            <td>
              {% if node.available %}
                <span class="dot glowing-green"></span>
              {% else %}
                <span class="dot glowing-red""></span>
              {% endif %}
            </td>
            <td>
              {% if node.web_compatible %}
              <img src="/static/images/success.svg" class="filter-green" width=16px>
              {% else %}
              <img src="/static/images/error.svg" class="filter-red" width=16px>
              {% endif %}
            </td>
            <td>{{ node.nettype }}</td>
            <td>{{ node.datetime_entered | humanize }}</td>
            <td>{{ node.datetime_checked | humanize }}</td>
            <td>{% for hc in node.healthchecks %}
              {% if loop.index > loop.length - 6 %}
              <span class="dot glowing-{% if hc.health %}green{% else %}red{% endif %}"></span>
              {% endif %}
            {% endfor %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
      <p>No nodes in the database yet...</p>
    {% endif %}
  </div>

</div>

<script src="/static/js/sort-table.min.js"></script>

{% endblock %}