{% extends "activities/accounts/base.html" %}

{% block content %}
<div>
  <div>
    <div>
      <img src="{{object.picture}}" width="100" height="100">
      <h1>{{object.full_name}}</h1>
    </div>
  </div>
  <div>
    <div>
      <contact-update inline-template>
        <div>
          <form @submit.prevent="createActivity">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
            <div>
              <label>{% if organization %}Contact{% else %}Profile{% endif %}</label>
              <account-typeahead inline-template ref="contact"
                                 v-bind:dataset="items.results"
                                 v-on:selectitem="updateItemSelected">
                <div>
                  <div>
                    <!-- the input field -->
                    <input type="text"
                           name="user"
                           placeholder="Username or e-mail"
                           autocomplete="off"
                           v-model="query"
                           @keydown.down="down"
                           @keydown.up="up"
                           @keydown.enter.prevent="hit"
                           @blur="clear"
                           @input="update" />
                    <!-- the list -->
                    {# Implementation note: If we use `d-block` instead of    #}
                    {# `style="display: block;"` the dropdown shows even when #}
                    {# `hasItems` is `False`.                                 #}
                    <ul style="display: block;"
                        v-show="hasItems">
                      <li v-for="(item, $item) in items"
                          @mousedown="hit"
                          @mousemove="setActive($item)">
                        <a :class="activeClass($item)" v-text="item.printable_name"></a>
                      </li>
                    </ul>
                  </div>
                </div>
              </account-typeahead>
            </div>
            <div>
              <label>Description</label>
              <textarea rows="10"
                        name="text"
                        v-model="activityText"></textarea>
            </div>
            <div>
              <button type="submit"value="submit">Create activity</button>
            </div>
          </form>
          <div v-show="!itemsLoaded">
            <h4>loading...</h4>
          </div>
          <div id="has-no-activity" v-show="itemsLoaded && items.results.length === 0" v-cloak>
            <h4>No activity<span> [[params.q]]</span></h4>
          </div>
          <div id="has-activities" v-show="itemsLoaded && items.results.length > 0" v-cloak>
            <div v-for="entry in items.results">
              <div>
                <p>[[$globals.humanizeDate(entry.created_at)]]
                  <span v-if="entry.created_by">
                by <a :href="'/users/' + entry.created_by.username + '/'">[[entry.created_by.printable_name]]</a></span>:
                </p>
                <p v-if="entry.contact">
                Contact: <a :href="'/users/' + entry.contact.username + '/'">[[entry.contact.printable_name]]</a>
                </p>
                <div>[[entry.text]]</div>
              </div>
            </div>
          </div>
        </div>
      </contact-update>
    </div>
  </div>

</div>
{% endblock %}