<form class="comment-form" action="{% url 'post_comment' %}" method="POST">

  {% csrf_token %}

  {{ comment_form.content_type }}
  {{ comment_form.object_pk }}
  {{ comment_form.timestamp }}
  {{ comment_form.security_hash }}

  <input type="hidden" name="next" value="{{ next }}">
  <input type="hidden" name="reply_to" v-bind:value="replyTo || 0"></input>

  <div class="btn-group-wrapper">
    <div data-toggle="buttons"
      class="btn-group btn-group-metacategory"
      v-bind:class="btnGroupClass">

      {% if 'request_for_contribution' in metacategories %}
      <label title="{{ metacategories.request_for_contribution.label }}"
        v-bind:class="{ active: active === 'request-for-contribution' }"
        v-on:click.prevent="setActive('request-for-contribution', 'Détailler mon appel à contribution…')"
        class="btn btn-default btn-request-for-contribution">
        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.request_for_contribution.id }}">
        <i class="fa fa-users"></i>
      </label>
      {% endif %}
      {% if 'reference' in metacategories %}
      <label title="{{ metacategories.reference.label }}"
        v-bind:class="{ active: active === 'reference' }"
        v-on:click.prevent="setActive('reference')"
        class="btn btn-default btn-reference">
        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.reference.id }}">
        <i class="fa fa-book"></i>
      </label>
      {% endif %}

      <label title="Commentaire"
        v-bind:class="{ active: active === 'comment' }"
        v-on:click.prevent="setActive('comment')"
        class="btn btn-default btn-comment">
        <i class="fa fa-comment"></i>
      </label>

      {% if 'agree' in metacategories %}
      <label title="{{ metacategories.agree.label }}"
        v-bind:class="{ active: active === 'agree' }"
        v-on:click.prevent="setActive('agree', 'Expliquez pourquoi vous êtes d\'accord…')"
        class="btn btn-default btn-agree">
        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.agree.id }}">
        <i class="fa fa-thumbs-up"></i>
      </label>
      {% endif %}
      {% if 'disagree' in metacategories %}
      <label title="{{ metacategories.disagree.label }}"
        v-bind:class="{ active: active === 'disagree' }"
        v-on:click.prevent="setActive('disagree', 'Expliquez pourquoi vous n\'êtes pas d\'accord…')"
        class="btn btn-default btn-disagree">
        <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.disagree.id }}">
        <i class="fa fa-thumbs-down"></i>
      </label>
      {% endif %}

    </div>
  </div>

  <transition name="slide-down">
    <div v-show="active">
      <fieldset class="form-group form-group-sm">
        <textarea class="form-control input-sm"
          name="{{ comment_form.comment.name }}"
          id="id_{{ comment_form.comment.name }}"
          v-bind:placeholder="placeholder"></textarea>
      </fieldset>

      <button type="submit" class="btn btn-xs btn-primary">Commenter</button>
      <a href="#" v-on:click.prevent="active = null" class="text-muted" style="margin-left: 5px;">
        <small>Annuler</small>
      </a>
    </div>
  </transition>

</form>
