<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="active = 'request-for-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="active = '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="active = '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="active = 'agree'" 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="active = 'disagree'" 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>

  <fieldset v-show="active" class="form-group form-group-sm">
    <textarea class="form-control input-sm"
      name="{{ comment_form.comment.name }}"
      id="id_{{ comment_form.comment.name }}"
      placeholder="Ajouter mon commentaire..."></textarea>
  </fieldset>

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

</form>
