
{% macro comments_table(institute, case, comments, variant_id=None) %}
  <table class='table table-bordered table-hover table-condensed'>
    <thead>
      <tr>
	<th>User</th>
	<th>Comment</th>
      </tr>
    </thead>
    <tbody>
      {% for comment in comments %}
      <tr>
      	<td>
      	  <small>
      	    <strong> {{ comment.user_name }} </strong>
      	    on {{ comment.created_at.date() }}
      	    {% if comment.level == 'global' %}
                    <span class='badge badge-info'>GLOBAL</span>
                  {% endif %}
      	    {% if comment.created_at < case.updated_at %}
                    <span class='badge badge-warning'>OLD</span>
                  {% endif %}
      	  </small>
      	</td>
      	<td>
      	  {{ comment.content }}
      	</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
{% endmacro %}

{% macro comments_panel(institute, case, current_user, comments, variant_id=None) %}
  <div class="card panel-default">
    <div class="panel-heading">Comments</div>
    <div class="card-body">
      <div class="list-group" style="max-height:200px; overflow-y: scroll;">
        {% for comment in comments %}
          <a class="list-group-item">
            <div class="row">
              <div class="col-xs-12">{{ comment.content }}</div>
            </div>
            <div class="row">
              <div class="d-flex justify-content-between align-items-center">
                <form method="POST" action="{{ url_for('cases.events', institute_id=institute._id, case_name=case.display_name, event_id=comment._id) }}">
                  <small>
                    <br>
                    <strong>{{ comment.user_name }}</strong>
                    on {{ comment.created_at.date() }}
                    {% if comment.level == 'global' %}
                      <span class="badge badge-info">GLOBAL</span>
                    {% endif %}
                    {% if comment.created_at < case.updated_at %}
                      <span class="badge badge-warning">OLD</span>
                    {% endif %}
                    {% if comment.user_id == current_user.email %}
                      <button class="btn btn-link btn-sm" type="submit"><i class="fa fa-remove"></i></button>
                    {% endif %}
                  </small>
                </form>
              </div>
            </div>
          </a>
        {% else %}
          <a class="list-group-item">No comments yet</a>
        {% endfor %}
      </div>
    </div>
    <div class="card-footer">
      <form action="{{ url_for('cases.events', institute_id=institute._id, case_name=case.display_name, variant_id=variant_id) }}" method="POST">
        <input type="hidden" name="link" value="{{ url_for('variant.variant', institute_id=institute._id, case_name=case.display_name, variant_id=variant_id) if variant_id else url_for('cases.case', institute_id=institute._id, case_name=case.display_name) }}">
        <div class="form-group">
          <textarea class="form-control" name="content" placeholder="Leave a comment"></textarea>
        </div>
        <div class="row">
          {% if variant_id %}
            <div class="col-sm-6">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="level" value="global">
                  Comment globally
                </label>
              </div>
            </div>
          {% endif %}
          <div class="col-sm-{{ 6 if variant_id else 12 }}">
            <button class="btn btn-outline-secondary form-control" type="submit">Comment</button>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endmacro %}

{% macro activity_panel(events) %}
  <div class="card panel-default">
    <div class="panel-heading">Activity</div>
    <ul class="list-group" style="max-height:400px; overflow-y: scroll;">
      {% for event in events %}
        <li class="list-group-item">
          <strong>{{ event.user_name }}</strong>
          {{ event.verb }}
          <a href="{{ event.link }}">{{ event.subject[0:30] }}</a>
          at <span class="timestamp">{{ event.created_at.date() }}</span>
        </li>
      {% else %}
        <li class="list-group-item">No activity yet</li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro pedigree_panel(case) %}
  <div class="card panel-default">
    <div class="panel-heading">Pedigree</div>
    <div class="card-body">
      <div class="table-responsive">
      {% if case.individuals|length == 1 %}
        <p>Single sample case: {{ case.individuals.0.display_name }}</p>
      {% else %}
        <div class="d-flex justify-content-center align-items-center" >
        {{ case.madeline_info|safe }}
        </div>
      {% endif %}
      </div>
    </div>
  </div>
{% endmacro %}
