{% extends "base.html" %}

{% block content %}
<body>
<div class="column is-4 is-offset-4">
  <h1 class="title">
          {% with messages = get_flashed_messages() %}
          {% if messages %}
            <div class="box">
                <div class="notification is-danger">
                    {{ messages[0] }}
                </div>
              </div>
          {% endif %}
          {% endwith %}
    Welcome, {{ name }}!<br>
    <h4>Upload your profile picture:</h4>
    <form action="/pp" method="POST" enctype="multipart/form-data">
      <input type="file" name="file">
      <input type="submit" value="Upload">
    </form>
    <br><br><br>
    <form method="POST" action="/echo">
      <div class="field">
          <div class="control">
              <input class="input is-large" type="text" name="echo" placeholder="Echo" autofocus="">
          </div>
      </div>
      <button class="button is-block is-info is-large is-fullwidth">Echo</button>
    </form>
  <br>
  </h1>
{% 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">
            <span class="icon is-small"><i class="fas fa-reply"></i></span>
          </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>
<script>
  document.addEventListener('DOMContentLoaded', () => {

  // Get all "navbar-burger" elements
  const $buttons = Array.prototype.slice.call(document.querySelectorAll('.button'), 0);

  // Add a click event on each of them
  $buttons.forEach( el => {
  el.addEventListener('click', () => {

      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-loading');
      $target.classList.toggle('is-loading');

  });
  });

  });
</script>
</body>
</h1>
{% endblock %}