{% extends 'base.html' %}

{% block content %}


<div class="container">
  <div class="columns top-section">
    <div class="column">
      <h2 class="title is-4">Add A Node</h2>
      <form method="POST" action="{{ url_for('meta.add') }}" id="addNodeForm">
          {{ form.csrf_token }}
          <div class="field">
            <div class="control">
              <input class="input" type="text" placeholder="http://mynode.com:18081" id="node_url" name="node_url" required>
            </div>
          </div>
          <div class="field is-grouped">
            <div class="control">
              <button class="button is-link">Submit</button>
            </div>
          </div>
          <ul>
          {% for field, errors in form.errors.items() %}
              <li>{{ form[field].label }}: {{ ', '.join(errors) }}</li>
          {% endfor %}
          </ul>
      </form>
    </div>
    <div class="column">
      <h2 class="title is-4">Find a Node</h2>
      <form>
        <div class="field">
          <div class="control">
            <div class="select">
              <select name="chain">
                <option value="monero" {% if request.args.get('chain') == 'monero' %}selected{% endif %}>Monero</option>
                <option value="wownero" {% if request.args.get('chain') == 'wownero' %}selected{% endif %}>Wownero</option>
              </select>
            </div>
            <div class="select">
              <select name="network" id="networkSelect">
                <option value="mainnet" {% if request.args.get('network') == 'mainnet' %}selected{% endif %}>Mainnet</option>
                <option value="testnet" {% if request.args.get('network') == 'testnet' %}selected{% endif %}>Testnet</option>
                <option value="stagenet" {% if request.args.get('network') == 'stagenet' %}selected{% endif %}>Stagenet</option>
              </select>
            </div>
            <label class="checkbox">
              CORS:
              <input type="checkbox" name="cors" {% if request.args.get('cors') == 'on' %}checked{% endif %}>
            </label>
            <label class="checkbox">
              Onion:
              <input type="checkbox" name="onion" id="onion" {% if request.args.get('onion') == 'on' %}checked{% endif %}>
            </label>
            <label type="checkbox">
              I2P:
              <input type="checkbox" name="i2p" id="i2p" {% if request.args.get('i2p') == 'on' %}checked{% endif %}>
            </label>
          </div>
        </div>
        <div class="field is-grouped">
          <div class="control">
            <button class="button is-link">Submit</button>
          </div>
          <div class="control">
            <a href="/" class="button is-link is-light">Cancel</a>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="nodes" class="bottom-section">
    {% if (nodes | length) == 0 %}
      <div class="section">
        <h1 class="title is-5">No nodes in the database yet...</h1>
      </div>
    {% else %}
    <div>
      <h1 class="title">Nodes</h1>
      <p class="">
        {% if web_compatible %}
          <div class="notification is-info is-light" id="webCompat">
            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).
            The more nodes there are running with these settings the more robust web clients will be in the future.
          </div>
        {% endif %}
        <!-- <a href="{{ url_for('meta.haproxy', chain=request.args.get('chain'), network=request.args.get('network'), cors=request.args.get('cors'), onion=request.args.get('onion')) }}">Download HAProxy config</a><br /><br /> -->
        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 500 blocks away from highest reported block).
      </p>
      <p class="">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>

      {% for country in countries %}
        {% if 'country' in request.args %}
          <a href="{{ request.path }}?{{ request.args | pop_arg('country') }}&country={{ country }}">
        {% else %}
          <a href="{% if request.args %}{{ request.url }}&{% else %}?{% endif %}country={{ country}}">
        {% endif %}
          <span class="tag is-dark">
            <span class="fflag fflag-{{ country }} ff-md m-4" title="{{ country }}"></span>
            {{ country }}
            ({{ countries[country] }})
          </span>
        </a>
      {% endfor %}

      <br>
      <div>
        <div class="columns">
          <div class="column">
            {% for node in nodes %}
            <div class="card">

              <div class="card-content">

                <div class="media">
                  <div class="media-left">
                    <figure class="image is-32x32">
                      {% if node.is_tor %}
                        <img src="/static/images/tor.svg" />
                      {% elif node.is_i2p %}
                        <img src="/static/images/i2p.svg" />
                        {% else %}
                        <span class="fflag fflag-{{ node.country_code }} ff-lg mr-4" title="{{ node.asn_description }}"></span>
                      {% endif %}
                    </figure>
                  </div>
                  <div class="media-content">
                    <p class="title is-6 nodeURL">{{ node.url }}</p>
                    {% if node.asn %}
                      <p class="subtitle asn">
                        ASN: {{ node.asn }} -
                        {{ node.asn_description}}
                      </p>
                    {% endif %}
                    <div class="statusDots subtitle">
                    {% for check in node.healthchecks %}
                      <span class="dot glowing-{{ check.color }}"></span>
                    {% endfor %}
                    </div>
                  </div>
                </div>

                <div class="content">
                  <br>
                  <p class="smol">
                    last checked {{ node.datetime_checked | humanize }}<br />
                    {{ node.uptime }}% uptime
                  </p>
                </div>

              </div>

              <footer class="card-footer">
                <p class="card-footer-item">
                  <span>
                    View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
                  </span>
                </p>
                <p class="card-footer-item">
                  <span>
                    Share on <a href="#">Facebook</a>
                  </span>
                </p>
              </footer>

            </div>
            {% endfor %}
          </div>

          <div class="column">
            <article class="panel is-info">
              <p class="panel-heading">
                Info
              </p>
              <p class="panel-tabs">
                <a class="is-active">All</a>
                <a>Public</a>
                <a>Private</a>
                <a>Sources</a>
                <a>Forks</a>
              </p>
              <div class="panel-block">
                <p class="control has-icons-left">
                  <input class="input is-info" type="text" placeholder="Search">
                  <span class="icon is-left">
                    <i class="fas fa-search" aria-hidden="true"></i>
                  </span>
                </p>
              </div>
              <a class="panel-block is-active">
                <span class="panel-icon">
                  <i class="fas fa-book" aria-hidden="true"></i>
                </span>
                bulma
              </a>
              <a class="panel-block">
                <span class="panel-icon">
                  <i class="fas fa-book" aria-hidden="true"></i>
                </span>
                marksheet
              </a>
              <a class="panel-block">
                <span class="panel-icon">
                  <i class="fas fa-book" aria-hidden="true"></i>
                </span>
                minireset.css
              </a>
              <a class="panel-block">
                <span class="panel-icon">
                  <i class="fas fa-book" aria-hidden="true"></i>
                </span>
                jgthms.github.io
              </a>
            </article>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>

</div>

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

{% endblock %}