{% 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">
      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 %}
