{% macro render_field(field, after="") %}
<div class="row">
  {{ field.label }}{{ field(**kwargs)|safe }}
  {% if after %} {{ after }}{% endif %}
  {% if field.errors %}
  <ul class="errors">
    {% for error in field.errors %}
    <li>{{ error }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
{% endmacro %}

{% macro render_bootstrap_field(field, field_description="", formclass="", rightlink=None) %}
  <fieldset class="form-group {% if field.errors %}has-error{% endif %} {% if formclass %}{{formclass}}{% endif %}">
    {% set formclasses = "form-control"%}
    {% if field.errors %} {% set formclasses = formclasses + " form-control-error" %} {% endif %}
    {% if field.type == "SelectField" %} {% set formclasses = formclasses + " c-select" %} {% endif %}

    {% if field.type == 'BooleanField' %}
      {% set formclasses = formclasses + " checkbox-inline" %}
        <label class="c-input c-checkbox">
          {{ field(type='checkbox', **kwargs) }}
          <span class="c-indicator"></span>
          <strong>{{ field.label }}</strong>
        </label>
        <br />
        {% if field_description %}
          <small class="text-muted">{{ field_description }}</small>
        {% endif %}
    {% else %}
      <div>
        <strong>{{ field.label }}</strong>
      {% if rightlink %}
      <div class="float-right"><a href="{{rightlink['url']}}">{{rightlink['text']}}</a>
      {% endif %}
      </div>
      {{ field(class_=formclasses)|safe }}
      <div>
        {% if field_description %}
          <small class="text-muted">{{field_description}}</small>
        {% endif %}
        {% if field.errors %}
        <span class="pull-xs-right text-danger">
          <small>
          {% for error in field.errors %}
            {{ error }}&nbsp;
          {% endfor %}
          </small>
        </span>
        {% endif %}
      </div>
    {% endif %}
  </fieldset>
{% endmacro %}

(class_="c-select")

{% macro render_field_invert(field, after="") %}
<div class="row">
  {{ field(**kwargs)|safe }}{{ field.label }}
  {% if after %} {{ after }}{% endif %}
  {% if field.errors %}
  <ul class="errors">
    {% for error in field.errors %}
    <li>{{ error }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
{% endmacro %}

{% macro render_field_in_row(field, readonly=False) %}
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">{{ field.label }}</label>
    <div class="col-sm-10">
        {% if field.type == 'BooleanField' %}
          {% set cssclass = 'form-check-input mt-2' %}
        {% else %}
          {% set cssclass = 'form-control pl-0' %}
        {% endif %}
        {{ field(class=cssclass, readonly=readonly)|safe }}
    </div>
  </div>
  {% if field.errors %}
    {% for error in field.errors %}
      <div class="alert alert-danger">{{ error }}</div>
    {% endfor %}
  {% endif %}
{% endmacro %}

{% macro render_field_in_cell(field, after="") %}
    <td>{{ field.label }}</td>
    <td>{{ field(**kwargs)|safe }}</td>
{% if after %} <td>{{ after }}</td>{% endif %}
{% if field.errors %}
{% for error in field.errors %}
<td class="errors">{{ error }}</td>
{% endfor %}
{% endif %}
{% endmacro %}


{% macro render_field_in_list(field) %}
    <li>{{ field.label }}</li>
    <li>{{ field(**kwargs)|safe }}</li>
{% if field.errors %}
{% for error in field.errors %}
<li class="errors">{{ error }}</li>
{% endfor %}
{% endif %}
{% endmacro %}


{% macro show_comment(comment, id, repo, username, issueid, form, PRinline=False) %}
<div class="card mb-4 clearfix">
  <div id="comment-{{ id }}" class="card-header bg-light d-flex align-items-center px-3 py-2">
    <div>
        {{ comment.user.default_email | avatar(16) | safe }}
        <a href="{{ url_for('ui_ns.view_user', username=comment.user.user)}}"
            title="{{ comment.user.html_title }}"
            class="notblue font-weight-bold">
            {{ comment.user.user }}
        </a>
        <a class="notblue" title="Permalink to this headline"
          href="#comment-{{ id }}">
          <span title="{{
            comment.date_created | format_datetime
            }}">commented
            {% if PRinline %}
            on line <a href="#c-{{ comment.commit_id }}-{{ comment.line }}"
                        class="inline_comment_link_btn">{{
                        comment.line }} of {{ comment.filename }}</a>
            {% endif %}
            {{ comment.date_created | humanize}}</span>
        </a>
    </div>
    <div class="issue_actions ml-auto">
        <div class="issue_action icon">
          <div class="btn-group" role="group" aria-label="Basic example">

            {% if id != 0 and g.fas_user %}
              {% if config.get('REACTIONS') %}
              <div class="btn-group dropdown">
                <button class="btn btn-outline-primary border-0" type="button" data-toggle="dropdown" title="Add reaction">
                    <span class="fa fa-heart"></span>
                </button>
                <div class="dropdown-menu reaction-picker" data-comment-id="{{ comment.id }}">
                  {% for label, emoji in config.get('REACTIONS') %}
                  <button class="btn btn-outline-secondary border-0 btn-sm" type="button" title="{{ label }}">
                      <span class="{{ emoji }}"></span>
                  </button>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            {% endif%}


            {% if g.fas_user %}
              <button class="reply btn btn-outline-primary border-0" type="button" title="Reply to this comment - lose formatting">
                <span class="fa fa-share-square-o"></span>
            </button>
            {% endif %}
            {% if id != 0 and g.fas_user and (g.repo_committer or (
              comment.parent.status in [True, 'Open']
              and g.fas_user.username == comment.user.username)) %}
            <a class="btn btn-outline-primary border-0 edit_btn" href="{{
                '%s/comment/%s/edit' % (request.base_url, comment.id) }}"
                data-comment="{{ comment.id }}" data-objid="{{ issueid }}">
              <i class="fa fa-pencil"  title="Edit comment"></i>
            </a>
            {% endif %}
            {% if id != 0 and g.fas_user and (g.repo_committer or (
                comment.parent.status in [True, 'Open']
                and g.fas_user.username == comment.user.username)) %}
            <button class="btn btn-outline-primary border-0 delete_comment_btn" type="submit"
                name="drop_comment" value="{{ comment.id }}"
                title="Remove comment">
              <i class="fa fa-trash"></i>
            </button>
            {% endif %}
          </div>
        </div>
      </div>
  </div>
  <div class="card-body pb-1">
    <section class="issue_comment">
      <div>
        <span class="edit_date" title="{{
            comment.edited_on | format_datetime if comment.edited_on
        }}">
        </span>
        <span class="comment_text comment_body">
        {%- if id == 0 -%}
{{ comment.content | markdown | noJS | safe }}
        {%- else -%}
{{ comment.comment | markdown | noJS | safe }}
        {%- endif -%}
        </span>
      </div>
    </section>
  </div>
  <div class="card-footer bg-transparent d-flex align-items-center border-0 p-0">
    {% if comment.edited_on %}
    <div class="issue_actions ml-3">
      <small>Edited {{ comment.edited_on | humanize }} by {{ comment.editor.username }} </small>
      </div>
    {% endif %}

    <div class="issue_reactions ml-auto" data-comment-id="{{ comment.id}}">
      <div class="btn-group">
        {% for r in comment.reactions | sort %}
        <button class="btn btn-outline-secondary btn-sm border-0"
                type="button"
                data-toggle="tooltip"
                title="{{ r }} sent by {{ comment.reactions[r] | join_prefix(10) }}">
            <span class="{{ config.get('_REACTIONS_DICT', {})[r] }}"></span>
            <span class="count">{{ comment.reactions[r] | length }}</span>
        </button>
        {% endfor %}
      </div>
    </div>
  </div>

</div>
{% endmacro %}

{% macro show_pr_initial_comment(pull_request, repo, form, username) %}
<div class="card mb-3 clearfix">
  {%if pull_request.initial_comment %}
  <div id="comment-0" class="card-header bg-light d-flex align-items-center px-3 py-2">
    <div>
      {{ pull_request.user.default_email | avatar(24) | safe }}
      <a href="{{ url_for('ui_ns.view_user', username=pull_request.user.user)}}"
          title="{{ pull_request.user.html_title }}"
          class="notblue font-weight-bold">
        {{ pull_request.user.user }}
      </a>
      <a class="notblue" title="Permalink to this headline"
        href="#comment-0">
        <span title="{{
          pull_request.date_created | format_datetime
          }}"> commented {{ pull_request.date_created | humanize}}</span>
      </a>
    </div>
    <div class="issue_actions ml-auto">
        <div class="issue_action icon">
          <div class="btn-group" role="group" aria-label="Basic example">
            {% if g.fas_user %}
              <a class="reply btn btn-outline-primary border-0 pointer" data-toggle="tooltip"
                  title="Reply to this comment - lose formatting"
                <span class="fa fa-share-square-o"></span>
              </a>
            {% endif %}
            {% if g.fas_user and (g.repo_committer or g.fas_user.username == pull_request.user.username) %}
            <a class="btn btn-outline-primary border-0"
               href="{{ url_for(
                'ui_ns.request_pull_edit',
                repo=repo.name,
                username=username,
                namespace=repo.namespace,
                requestid=pull_request.id) }}">
              <i class="fa fa-pencil"  title="Edit comment"></i>
            </a>
            {% endif %}
          </div>
        </div>
      </div>
  </div>
  <div class="card-body">
    <section class="issue_comment">
      <div>
        <span class="comment_text comment_body">
          {{ pull_request.initial_comment | markdown | noJS | safe }}
        </span>
      </div>
    </section>
  </div>
  {% else %}
  <div class="card-header bg-light text-center p-3 border-0">
    <span class="text-muted font-weight-bold">no initial comment</span>
    {% if g.fas_user and (g.repo_committer or g.fas_user.username == pull_request.user.username) %}
      <div>
      {% if pull_request.status == 'Open' %}
      <a class="btn btn-outline-primary mt-2 btn-sm"
        href="{{ url_for(
          'ui_ns.request_pull_edit',
          repo=repo.name,
          username=username,
          namespace=repo.namespace,
          requestid=pull_request.id) }}">
        add initial comment
      </a>
      {% endif %}
      </div>
      {% endif %}
  </div>
  {% endif %}

</div>
{% endmacro %}


{% macro show_initial_comment(comment, username, repo, issueid, form) %}
<div class="clearfix p-b-3" id="original_comment_box">
  <section class="issue_comment" id="comment-0">
    <div class="comment_body">
{{- comment.content | markdown | noJS | safe -}}
    </div>
  </section>
  <div class="issue_action icon float-right">
    <div class="btn-group" role="group">
      {% if g.fas_user %}
        <a class="btn btn-outline-secondary border-0 btn-sm reply pointer"
          title="Reply to the initial comment - lose formatting">
          <i class="fa fa-share-square-o"></i> Reply
        </a>
      {% endif %}
    </div>
  </div>
</div>
{% endmacro %}

{% macro show_attachments(attachments) %}
  <div class="list-group list-group-flush">
    {% for attachment in attachments %}
      {#
          attachment[0] = link
          attachment[1] = file name
          attachment[2] = display name
          attachment[3] = date
          attachment[4] = comment id
        #}
      <div class="list-group-item list-group-item-action border-0 pl-2">
        <div class="ellipsis font-size-09 font-weight-bold">
          <a href="{{ attachment[0] }}?raw=1" title="{{attachment[2]}}" data-toggle="tooltip">{{ attachment[2] }}</a>
        </div>
        <div><small>
          Attached {{ attachment[3] | humanize}}
          {% if attachment[4] is not none %}
          <a href="#comment-{{ attachment[4] }}" class="pull-right">View Comment</a>
          {% else %}
          <a href="#comment-0" class="pull-right">View Comment</a>
          {% endif %}
        </small></div>
      </div>
    {% endfor %}
  </div>
{% endmacro %}