{% extends "userprofile_master.html" %}

{% block title %}Issues for {{ username }}{% endblock %}

{% from "_render_issues.html" import render_issue_row %}


{% block userprofile_content %}
<div class="pt-4">
  <div class="container pb-5">
    <div class="d-flex align-items-center">
    <h4 class="mb-0 font-weight-bold">
        Issues for {{ username | avatar(20) | safe }} {{ username }}
    </h4>
    <div class="ml-auto">
      <span class="btn-group btn-group-sm issues-tagbar" role="group">
          <a data-togglebutton="issue-status-open" id="toggle-open" class="btn btn-primary btn-sm" href="#">Open</a>
          <a data-togglebutton="issue-status-closed" id="toggle-closed" class="btn btn-outline-primary btn-sm" href="#">Closed</a>
          <a data-togglebutton="issue-status-all" class="btn btn-outline-primary btn-sm" href="#">All</a>
      </span>
    </div>
    </div>
    <div class="d-flex mt-4 mb-2 align-items-center">
      <h5 class="font-weight-bold mb-0">Issues Created</h5>
      <span class="ml-auto btn btn-outline-secondary border-0 o-100 disabled font-weight-bold">
        <span id="opened_issue_count"></span> issues
      </span>
    </div>
    {% for issue in user.issues if issue.project.settings.get('issue_tracker', True) %}
      {% if issue.status|lower != "open" %}
        {% set hidden = "hidden "%}
      {% else %}
        {% set hidden = "" %}
      {% endif %}
      {% set htmlclass = hidden+"loop-index-2 issue-status issue-status-"+issue.status|lower%}
      {{render_issue_row(issue, issue.project, username, class=htmlclass, showproject=True)}}
    {% endfor %}

    <div class="d-flex mt-4 mb-2 align-items-center">
      <h5 class="font-weight-bold mb-0">Assigned Issues</h5>
      <span class="ml-auto btn btn-outline-secondary border-0 o-100 disabled font-weight-bold">
        <span id="assigned_issue_count"></span> issues
      </span>
    </div>
    {% for issue in user.assigned_issues if issue.project.settings.get('issue_tracker', True) %}
      {% if issue.status|lower != "open" %}
        {% set hidden = "hidden "%}
      {% else %}
        {% set hidden = "" %}
      {% endif %}
      {% set htmlclass = hidden+"loop-index-1 issue-status issue-status-"+issue.status|lower%}
      {{render_issue_row(issue, issue.project, username, class=htmlclass, showproject=True)}}
    {% endfor %}
  </div>
</div>

{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript" nonce="{{ g.nonce }}">
  count_issues(status='.issue-status-open');
  $(function(){
    $('.issues-tagbar .btn').click(function(){
      var current_btn = $(this).attr("data-togglebutton");
      count_issues(status='.'+current_btn);
      $('.issues-tagbar .btn-primary').addClass("btn-outline-primary");
      $('.issues-tagbar .btn-primary').removeClass("btn-primary");
      $(this).removeClass("btn-outline-primary");
      $(this).addClass("btn-primary");
      if (current_btn == "issue-status-all"){
        count_issues(status='');
        $(".issue-status").show();
      } else {
        $(".issue-status").hide();
        $("."+$(this).attr("data-togglebutton")).show();
      }
    });
  });
  function count_issues(status='.issue-status-open') {
    var assigned_issue_count = $(status + '.loop-index-1').length;
    var opened_issue_count = $(status + '.loop-index-2').length;
    $('#assigned_issue_count').text(assigned_issue_count);
    $('#opened_issue_count').text(opened_issue_count);
  }
</script>
{% endblock %}