{% extends "base.html" %}

{% block content %}

<h1 class="title">
  Echo
</h1>
<h2 class="subtitle">
  How far does your voice go?
</h2>
<body>
  {% for echo in echos|reverse %}
  <br>
  <article class="media">
    <figure class="media-left">
      <p class="image is-64x64">
        <img src="https://bulma.io/images/placeholders/128x128.png">
      </p>
    </figure>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>{{echo.name}}</strong> <small>@{{echo.handle}}</small> <small>{{echo.date}}</small>
          <br>
          {{echo.echo}}
        </p>
      </div>
      <nav class="level is-mobile">
        <div class="level-left">
          <a class="level-item">
            <button class="js-modal-trigger" data-target="modal-js-example">
              Reply
            </button>
          </a>
          <a class="level-item">
            <span class="icon is-small"><i class="fas fa-retweet"></i></span>
          </a>
          <a class="level-item">
            <span class="icon is-small"><i class="fas fa-heart"></i></span>
          </a>
        </div>
      </nav>
      {% for reply in replies|reverse %}
      <article class="media">
        <figure class="media-left">
          <p class="image is-64x64">
            <img src="https://bulma.io/images/placeholders/128x128.png">
          </p>
        </figure>
        <div class="media-content">
          <div class="content">
            <p>
              <strong>{{reply.name}}</strong> <small>@{{reply.handle}}</small> <small>{{reply.date}}</small>
              <br>
              {{reply.reply}}
            </p>
          </div>
          <nav class="level is-mobile">
            <div class="level-left">
              <a class="level-item">
                <button class="js-modal-trigger" data-target="modal-js-example">
                  Reply
                </button>
              </a>
              <a class="level-item">
                <span class="icon is-small"><i class="fas fa-retweet"></i></span>
              </a>
              <a class="level-item">
                <span class="icon is-small"><i class="fas fa-heart"></i></span>
              </a>
            </div>
          </nav>
        </div>
        <div class="media-right">
          <!-- <button class="delete"></button> -->
        </div>
      </article>
      {% endfor %}
    </div>
    <div class="media-right">
      <!-- <button class="delete"></button> -->
    </div>
  </article>
{% endfor %}
  <!-- <div class="columns is-variable is-multiline is-centered is-1-mobile">
          <img src="/static/images/example1.jpg">
          <img src="/static/images/example2.jpg">
          <img src="/static/images/example3.jpg">
          <img src="/static/images/example4.jpg">
    </div> -->
  <div id="modal-js-example" class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
      <div class="box">
        <p>Reply</p>
        <form method="POST" action="/reply">
          <div class="field">
              <div class="control">
                  <input class="input is-large" type="text" name="reply" placeholder="Reply" autofocus="">
                  <input type="hidden" name="echo_id" value="">
              </div>
          </div>
          <button class="button is-block is-info is-large is-fullwidth">Reply</button>
        </form>
      </div>
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
  </div>
</body>


{% endblock %}