{%- extends "nav" -%}
{%- block card %}
      <!-- USER PROFILE -->
      <div class="card center">
        <!-- PROFILE INFO BOX -->
        <div class="capsule capsule-profile" title="Scuttlebutt account profile information">
          <!-- edit profile button -->
          <img id="editProfile" class="icon-small nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
          <!-- PROFILE BIO -->
          <!-- profile picture -->
          <img id="profilePicture" class="icon-large" src="{ image_path }" alt="Profile picture">
          <!-- name, public key & description -->
          <p id="profileName" class="card-text" title="Name">{ name }</p>
          <label class="label-small label-ellipsis font-gray" style="user-select: all;" for="profileName" title="Public Key">{ public_key }</label>
          <p id="profileDescription" style="margin-top: 1rem" class="card-text" title="Description">{ description }</p>
        </div>
        <!-- PUBLIC POST FORM -->
        <form id="postForm" action="/scuttlebutt/post" method="post">
          <!-- input for message contents -->
          <textarea id="publicPost" class="center input message-input" title="Compose Public Post"></textarea>
          <input id="publishPost" class="button button-primary center" title="Publish" type="submit" value="Publish">
        </form>
        <!-- BUTTONS -->
        <!-- TODO: each of these buttons needs to be a form with a public key -->
        <div id="buttons">
          <a id="followPeer" class="button button-primary center" href="/scuttlebutt/follow" title="Follow Peer">Follow</a>
          <a id="blockPeer" class="button button-warning center" href="/scuttlebutt/block" title="Block Peer">Block</a>
          <a id="privateMessage" class="button button-primary center" href="/scuttlebutt/private_message" title="Private Message">Private Message</a>
        </div>
        <!-- FLASH MESSAGE -->
        {% include "snippets/flash_message" %}
      </div>
{%- endblock card -%}