{%- extends "nav" -%}
{%- block card %}
    {# ASSIGN VARIABLES #}
    {# ---------------- #}
      <!-- SSB PROFILE UPDATE FORM -->
      <div class="card card-wide center">
        <form id="profileInfo" class="center" enctype="multipart/form-data" action="/scuttlebutt/profile/update" method="post">
          <div style="display: flex; flex-direction: column">
            <label for="name" class="label-small font-gray">NAME</label>
            <input style="margin-bottom: 1rem;" type="text" id="name" name="new_name" placeholder="Choose a name for your profile..." value="{{ name }}">
            <label for="description" class="label-small font-gray">DESCRIPTION</label>
            <textarea id="description" class="message-input" style="margin-bottom: 1rem;" name="new_description" placeholder="Write a description for your profile...">{{ description }}</textarea>
            <label for="image" class="label-small font-gray">IMAGE</label>
            <input type="file" id="fileInput" class="font-normal" name="image">
          </div> 
          <input type="hidden" name="id" value="{{ id }}">
          <input type="hidden" name="current_name" value="{{ name }}">
          <input type="hidden" name="current_description" value="{{ description }}">
          <div id="buttonDiv" style="margin-top: 2rem;">
            <input id="updateProfile" class="button button-primary center" title="Publish" type="submit" value="Publish">
            <a class="button button-secondary center" href="/scuttlebutt/profile" title="Cancel">Cancel</a>
          </div>
        </form>
        <!-- FLASH MESSAGE -->
        {% include "snippets/flash_message" %}
      </div>
{%- endblock card -%}