{% extends 'depcheck/layout.html' %}

{% if ptype == 'source' %}
  {% set page_title = 'Dependency issues for {}:{} (source, {})'.format(rss.repo.name, rss.suite.name, arch_name) %}
{% else %}
  {% set page_title = 'Dependency issues for {}:{} (binary, {})'.format(rss.repo.name, rss.suite.name, arch_name) %}
{% endif %}

{% block body_header %}
<h1 class="title mb-4">Dependency issues for {{'source' if ptype == 'source' else 'binary'}} packages in {{rss.repo.name}}/{{rss.suite.name}} [{{arch_name}}]</h1>
{% endblock %}

{% block js_pre %}
{% if current_page <= 1 %}
<script src="{{ url_for('static', filename='js/moment/moment.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/chart/chart.umd.js') }}"></script>
<script src="{{ url_for('static', filename='js/chart/chartjs-adapter-moment.min.js') }}"></script>
{% endif %}
{% endblock %}

{% block body %}

<div class="tabs is-toggle mb-1">
  <ul>
    <li class="{{'is-active' if ptype != 'source'}}">
        <a href="{{ url_for('depcheck.issue_list', repo_name=rss.repo.name, suite_name=rss.suite.name, ptype='binary', arch_name=rss.suite.primary_architecture.name, page=1) if ptype == 'source' else '#'}}">
            <span class="icon is-small"><i class="fas fa-cube" aria-hidden="true"></i></span>
            <span>Binary Packages</span>
        </a>
    </li>
    <li class="{{'is-active' if ptype == 'source'}}">
        <a href="{{ url_for('depcheck.issue_list', repo_name=rss.repo.name, suite_name=rss.suite.name, ptype='source', arch_name=rss.suite.primary_architecture.name, page=1) if ptype != 'source' else '#'}}">
            <span class="icon is-small"><i class="fas fa-drafting-compass" aria-hidden="true"></i></span>
            <span>Source Packages</span>
        </a>
    </li>
  </ul>
</div>

<div class="column is-8">

    <div class="dropdown mb-3 is-hoverable">
        <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="archs-menu">
            <span>Architecture</span>
            <span class="icon is-small">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
            </button>
        </div>
        <div class="dropdown-menu" id="archs-menu" role="menu">
            <div class="dropdown-content">
                {% for arch in rss.suite.architectures %}
                <a class="dropdown-item" href="{{ url_for('depcheck.issue_list', repo_name=rss.repo.name, suite_name=rss.suite.name, ptype=ptype, arch_name=arch.name, page=1) }}">
                    <i class="fas fa-microchip"></i> {{arch.name}}
                </a>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if current_page <= 1 %}
    <canvas id="issueChart" style="width:100%;max-height:140px"></canvas>

    <script>
      const data = JSON.parse('{{stats_raw|safe}}').map(item => {
        return {
          x: new Date(item.x * 1000),
          y: item.y
        };
      });

      new Chart('issueChart', {
        type: 'line',
        data: {
          datasets: [{
              data: data,
              label: 'Issues for {{ptype}} packages in {{arch_name}}',
              fill: true
            }]
        },
        options: {
            scales: {
              x: {
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                     day: 'YYYY-MM',
                  }
                }
              }
            },
            plugins: {
              legend: {
                  display: false
              }
            }
          }
      });
    </script>
    {% endif %}

    {% for issue in issues %}
        <div class="card">
        <header class="card-header">
            <div class="card-header-title has-text-weight-semibold">
                <a href="{{ url_for('depcheck.issue_details', repo_name=rss.repo.name, suite_name=rss.suite.name, uuid=issue.uuid) }}">
                    <span class="has-text-black">{{issue.package_name}} {{issue.package_version}}</span>&nbsp;
                    <p class="mb-1 text-secondary"><i class="fas fa-microchip"></i> {{issue.architectures|join(', ')}}</p>
                    {% for missing in issue.missing %}
                    <p class="mb-1"><i class="far fa-question-circle"></i> {{missing.unsat_dependency}}</p>
                    {% endfor %}
                    {% for conflict in issue.conflicts %}
                    <p class="mb-1"><i class="fas fa-fist-raised"></i></i> {{conflict.pkg1.package_name}} vs. {{conflict.pkg2.package_name}}</p>
                    {% endfor %}
                </a>
            </div>
        </header>
        </div>
    {% endfor %}

    <br/>
    <nav class="pagination" role="navigation" aria-label="pagination">
        <a class="pagination-previous"
            href="{{ url_for('depcheck.issue_list', repo_name=rss.repo.name, suite_name=rss.suite.name, ptype=ptype, arch_name=arch_name, page=current_page-1) if current_page > 1 else '#'}}"
            {{'disabled' if current_page <= 1 }}>
            Previous
        </a>
        <a class="pagination-next"
            href="{{ url_for('depcheck.issue_list', repo_name=rss.repo.name, suite_name=rss.suite.name, ptype=ptype, arch_name=arch_name, page=current_page+1) if current_page < page_count else '#'}}"
            {{'disabled' if current_page >= page_count }}>
            Next
        </a>

        <ul class="pagination-list">

        {% for i in range(1, page_count + 1) %}
            <li>
                <a class="pagination-link {{'is-current' if i == current_page }}" aria-label="Goto page {{i}}"
                    href="{{ url_for('depcheck.issue_list', repo_name=rss.repo.name, suite_name=rss.suite.name, ptype=ptype, arch_name=arch_name, page=i) }}">{{i}}</a>
            </li>
        {% endfor %}
        </ul>
    </nav>
</div>
{% endblock %}