
{% 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 %}
      	    {% if comment.created_at < comment.updated_at %}
              <span class='badge badge-secondary'>edited</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="mt-3">
  {% set comments = comments|list %}
  <h6 class="comments-title"></i><i class="far fa-comments"></i> Comments ({{ comments|length }})</h6>
  <div class="list-group" style="max-height:200px; overflow-y: scroll;">
    <style>.even { background-color: #f6f6f6 }</style>
    <style>.odd { background-color: #d5e8f0 }</style>
    {% for comment in comments %}
      <div class="row ml-1 alert {% if loop.index0 % 2 %}even{% else %}odd{% endif %}">
          <div class="col-7 text-break">{{ comment.content|fix_punctuation }}</div>
          <div class="col-5 text-right">
            <form method="POST" action="{{ url_for('cases.events', institute_id=institute._id, case_name=case.display_name, event_id=comment._id,_anchor='comments') }}">
              <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 %}
                {% if comment.created_at < comment.updated_at %}
                  <span class='badge badge-secondary'>edited</span>
                {% endif %}
                {% if comment.user_id == current_user.email %}
                  <button class="btn btn-link btn-sm" type="submit" name="remove"><i class="fa fa-remove"></i></button>
                  <button class="btn btn-link btn-sm" type="button" data-toggle="modal" data-target="#editComment_{{loop.index}}"><i class="fa fa-edit"></i></button>
                {% endif %}
              </small>
            </form>
          </div>
        </div>
        {{ edit_comment(institute, case, current_user, comment, loop.index) }}
    {% endfor %}
  </div> <!-- end of <div class="list-group" -->
    <div class="card-footer">
      <form action="{{ url_for('cases.events', institute_id=institute._id, case_name=case.display_name, variant_id=variant_id, _anchor='comments') }}" 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 edit_comment(institute, case, current_user, comment, index) %}
<!-- Edit comment modal -->
<form method="POST" action="{{ url_for('cases.events', institute_id=institute._id, case_name=case.display_name, event_id=comment._id, _anchor='comments') }}">
<div class="modal fade" id="editComment_{{index}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Edit comment</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="commentContent">Comment content</label>
        <textarea class="form-control" name="updatedContent" id="commentContent" required="required">{{comment.content}}</textarea>
      </div>
      <div class="row">
        {% if comment.variant_id %}
          <div class="col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="level" value="global" {{ "checked" if comment.level == "global"}} >
                Comment globally
              </label>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary" name="edit">Save changes</button>
    </div>
  </div>
</div>
</div>
</form>
{% endmacro %}

{% macro activity_panel(events) %}
  <div class="card panel-default">
    <div class="panel-heading"><span class="fa fa-book"></span>&nbsp;Activity</div>
    <ul class="list-group" style="max-height:400px; overflow-y: scroll;">
      {% for event in events|sort(attribute="created_at", reverse=True) %}
        <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"><span class="fa fa-sitemap">&nbsp;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" >
          <object>
        {{ case.madeline_info|safe }}
          </object>
        </div>
      {% endif %}
      </div>
    </div>
  </div>
{% endmacro %}
