{% extends "repo_master.html" %}

{% block title %}Roadmap - {{
    repo.namespace + '/' if repo.namespace }}{{ repo.name }}{% endblock %}
{% set tag = "home"%}

{% block repo %}
<h3 class="font-weight-bold">
    Roadmap
    <div class="btn-group btn-group-sm float-right" role="group">
    {% if g.authenticated %}
        {% if g.repo_admin %}
        <a href="{{ url_for(
                'ui_ns.view_settings',
                repo=repo.name,
                username=username,
                namespace=repo.namespace) }}#roadmap-tab"
                class="btn btn-outline-primary"
                title="Configure Milestones"
                data-toggle="tooltip">
            <i class="fa fa-cogs fa-fw"></i>
            Configure Milestones
        </a>
        {% endif %}
    {% endif %}
    </div>
</h3>

<div class="row mt-4">
    <div class="col pb-5">
        <div class="list-group">
            <div class="list-group-item bg-light">
                <div class="row">
                    <div class="col">
                        <div class="btn-group">
                            <div class="dropdown">
                            {% if milestones_status_select == 'active' %}
                                <a class="btn btn-sm btn-outline-primary border-0 font-weight-bold dropdown-toggle" href="#" data-toggle="dropdown" id="issue-status-dropdown">
                                    <span class="fa fa-fw fa-map-signs"></span> {{milestones_totals['active']}} Active Milestones
                            {% elif milestones_status_select == 'inactive'%}
                                <a class="btn btn-sm btn-outline-secondary border-0 font-weight-bold dropdown-toggle" href="#" data-toggle="dropdown" id="issue-status-dropdown">
                                    <span class="fa fa-fw fa-map-signs"></span> {{milestones_totals['inactive']}} Inactive Milestones
                            {% elif milestones_status_select == 'all' %}
                                <a class="btn btn-sm btn-outline-secondary border-0 font-weight-bold dropdown-toggle" href="#" data-toggle="dropdown" id="issue-status-dropdown">
                                    <span class="fa fa-fw fa-map-signs"></span> {{milestones_totals['inactive']+milestones_totals['active']}} All Milestones
                            {% endif %}
                                </a>
                                <div class="dropdown-menu">
                                <a class="dropdown-item {% if milestones_status_select == 'active' %}active{%endif%}"
                                        href="{{ url_for('ui_ns.view_roadmap',
                                        repo=repo.name,
                                        username=repo.username if repo.is_fork else None,
                                        namespace=repo.namespace,
                                       status='active',
                                       keyword=keyword,) }}">
                                       {{milestones_totals['active']}} Active Milestones
                                </a>

                                <a class="dropdown-item {% if milestones_status_select == 'inactive' %}active{%endif%}"
                                    href="{{ url_for('ui_ns.view_roadmap',
                                        repo=repo.name,
                                        username=repo.username if repo.is_fork else None,
                                        namespace=repo.namespace,
                                        status='inactive',
                                        keyword=keyword) }}">
                                        {{milestones_totals['inactive']}} Inactive Milestones
                                </a>

                                <a class="dropdown-item {% if milestones_status_select == 'all' %}active{%endif%}"
                                        href="{{ url_for('ui_ns.view_roadmap',
                                        repo=repo.name,
                                        username=repo.username if repo.is_fork else None,
                                        namespace=repo.namespace,
                                       status='all',
                                       keyword=keyword) }}">
                                       {{milestones_totals['inactive']+milestones_totals['active']}} All Milestones
                                </a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle" data-flip="false" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="font-weight-bold">Filter{%if keyword %}:{% endif %}
                                </span>

                                    {% if keyword %}
                                    <i class="fa fa-search pl-2 pr-1" title="tagged"></i>
                                    <span>{{ keyword }}</span>
                                    {% endif %}
                                    {% if onlyincomplete == True %}
                                    <i class="fa fa-percent pl-2 pr-1" title="tagged"></i>
                                    <span>only incomplete</span>
                                    {% endif %}
                                </button>
                                <div class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton" id="filters-dropdown">
                                <div>
                                    <form id="filters_form" action="{{ url_for('ui_ns.view_roadmap',
                                        username=username,
                                        namespace=repo.namespace,
                                        repo=repo.name ) }}" method="GET">
                                    <input type="hidden" name="status" value="{{ milestones_status_select or 'all' }}" />

                                    <div class="form-group row mb-1" id="onlyincomplete-filter-group">
                                        <label for="tags" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-percent"></i> Show Incomplete only</label>
                                        <input type="checkbox" name="onlyincomplete" value="True" {{'checked="checked"' if onlyincomplete}} class="ml-auto mr-1">
                                    </div>

                                    <div class="form-group row mb-2">
                                        <label for="search_pattern" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-search"></i></label>
                                        <div class="col pl-1">
                                        <input type="text" class="form-control"
                                                name="keyword" placeholder="Search"
                                                value="{{ keyword or '' }}" />
                                        </div>
                                    </div>
                                    {#
                                    <div class="form-group row mb-1" id="milestone-filter-group">
                                        <label for="milestone" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-map-signs"></i></label>
                                        <div class="col pl-1">
                                        <select name="milestone" id="milestone-selectize" placeholder="Milestone">
                                            <option value=""></option>
                                            <option value="none" {% if no_milestones %}selected="selected"{% endif %}>Milestone unset</option>
                                            {% for stone in repo.milestones %}
                                            {% if loop.first %}
                                                <optgroup label="Active">
                                            {% endif %}
                                            {% if repo.milestones[stone]['active']%}
                                            <option value="{{ stone }}" {% if milestones[0] == stone %}selected="selected"{% endif %}>{{stone}}</option>
                                            {% endif %}
                                            {% if loop.last %}
                                                </optgroup>
                                            {% endif %}
                                            {% endfor %}
                                            {% for stone in repo.milestones %}
                                            {% if loop.first %}
                                                <optgroup label="Inactive">
                                            {% endif %}
                                            {% if not repo.milestones[stone]['active']%}
                                            <option value="{{ stone }}" {% if milestones[0] == stone %}selected="selected"{% endif %}>{{stone}}</option>
                                            {% endif %}
                                            {% if loop.last %}
                                                </optgroup>
                                            {% endif %}
                                            {% endfor %}
                                        </select>
                                        </div>
                                        <div class="col-auto pl-0 pr-1 pt-1">
                                        <i class="fa fa-times fa-fw text-muted" id="milestone-selectize-reset"></i>
                                        </div>
                                    </div>

                                    <div class="form-group row mb-1" id="priority-filter-group">
                                        <label for="priority" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-bolt"></i></label>
                                        <div class="col pl-1">
                                        <select name="priority" id="priority-selectize" placeholder="Priority">
                                        {% for p in repo.priorities | sort %}
                                            <option value="{{ p }}" {% if p | int == priority | int %}selected="selected"{% endif %}>{{repo.priorities[p | string]}}</option>
                                        {% endfor %}
                                        </select>
                                        </div>
                                        <div class="col-auto pl-0 pr-1 pt-1">
                                        <i class="fa fa-times fa-fw text-muted" id="priority-selectize-reset"></i>
                                        </div>
                                    </div>

                                    <div class="form-group row mb-1" id="assignee-filter-group">
                                        <label for="assignee" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-user-plus"></i></label>
                                        <div class="col pl-1">
                                        <select name="assignee" id="assignee-selectize" placeholder="Assignee">
                                            {% if assignee %}
                                            <option value="{{assignee}}" selected="selected">{{assignee}}</option>
                                            {% endif %}
                                        </select>
                                        </div>
                                        <div class="col-auto pl-0 pr-1 pt-1">
                                        <i class="fa fa-times fa-fw text-muted" id="assignee-selectize-reset"></i>
                                        </div>
                                    </div>

                                    <div class="form-group row mb-1" id="author-filter-group">
                                        <label for="author" class="col-auto align-self-center pl-1 pr-0"><i class="text-muted fa fa-fw fa-user"></i></label>
                                        <div class="col pl-1">
                                        <select name="author" id="author-selectize" placeholder="Submitted by">
                                            {% if author %}
                                            <option value="{{author}}" selected="selected">{{author}}</option>
                                            {% endif %}
                                        </select>
                                        </div>
                                        <div class="col-auto pl-0 pr-1 pt-1">
                                        <i class="fa fa-times fa-fw text-muted" id="author-selectize-reset"></i>
                                        </div>
                                    </div>#}

                                    <input type="submit" class="btn btn-block btn-primary" value="Apply Filters" />

                                    <a href="{{ url_for('ui_ns.view_roadmap',
                                    repo=repo.name,
                                    username=username,
                                    namespace=repo.namespace,
                                    status=milestones_status_select) }}" class="btn btn-link btn-block">Reset Filters</a>

                                    </form>
                                </div>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
            </div>
            {% if milestones %}
            {% for milestone in milestones %}
            <a href="{{ url_for(
                'ui_ns.view_milestone',
                repo=repo.name,
                username=repo.username if repo.is_fork else None,
                namespace=repo.namespace,
                milestone=milestone) }}"
                class="list-group-item list-group-item-action">
                <div class="row">
                    <div class="col-6 d-flex justify-content-between align-items-center">
                        <span>
                            <span class="fa fa-fw fa-map-signs"></span>
                            <span class="font-weight-bold">{{milestone}}</span>
                            {% if repo.milestones[milestone]['date'] %}
                                <span class="text-muted pl-3">Due: {{repo.milestones[milestone]['date']}}</span>
                            {% endif %}
                        </span>
                        <span class="font-weight-bold text-muted">
                            <i class="fa fa-fw text-muted fa-exclamation-circle"></i>
                            {{milestones[milestone]['Total']}} issues
                        </span>
                    </div>
                    <div class="col-6">
                        {% if milestones[milestone]['Total'] != 0 %}
                            {% set completed_percentage = (100.0 * (milestones[milestone]['Closed'] / milestones[milestone]['Total'])) %}
                            <div class="progress height-100per"
                                 title="{{completed_percentage|round|int}}% Completed | {{milestones[milestone]['Closed']}} Closed Issues | {{milestones[milestone]['Open']}} Open Issues"
                                 data-toggle="tooltip" data-placement="bottom">
                                <div class="progress-bar bg-primary"
                                    role="progressbar""
                                    data-width="{{completed_percentage|round|int}}%"
                                    aria-valuenow="{{completed_percentage|round|int}}"
                                    aria-valuemin="0"
                                    aria-valuemax="100">
                                </div>
                            </div>
                        {% else %}
                            <div class="progress height-100per ">
                                <div class="progress-bar progress-bar-striped width-100per light_gray_bg"
                                    title="no issues assigned to the {{milestone}} milestone"
                                    data-toggle="tooltip" data-placement="bottom"
                                    role="progressbar"
                                    aria-valuenow="0"
                                    aria-valuemin="0"
                                    aria-valuemax="100">
                                </div>
                            </div>
                        {% endif %}

                    </div>
                </div>
            </a>
            {% endfor %}
            {% else %}
            <div class="list-group-item">
                <div class="row">
                    <div class="col text-center p-5">
                        <h4 class="text-muted">no
                            {% if milestones_status_select == 'inactive' %}completed{% else %}active{% endif %}
                            milestones
                        </h4>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='tags.js') }}?version={{ g.version}}"></script>

<script type="text/javascript" nonce="{{ g.nonce }}">

function update_progress_bar() {
  $(".progress-bar").each(function(ind, obj) {
    $(obj).css('width', $(obj).attr('data-width'));
  });
}

$(document).ready(function() {
    update_progress_bar();
});
</script>
{% endblock %}