<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Issue Inspector</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>

    <nav class="navbar navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Issue Inspector</a>
            </div>
            <div id="navbar">
                <ul class="nav navbar-nav">
                    <li>

                        <form class="form-inline navbar-form" id="auth-from">
                            {% csrf_token %}
                            <div class="form-group">
                                <input type="text" name="username" class="form-control" id="username" placeholder="GitHub Username" required>
                            </div>
                            <div class="form-group">
                                <input type="text" name="token" class="form-control" id="token" placeholder="Access Token" required>
                            </div>
                            <button id="inspect" type="submit" data-xform="auth-from" data-xtarget="box-issues" data-xmethod="post" class="btn btn-default xross">
                                Inspect
                            </button>
                        </form>

                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="https://github.com/settings/tokens">Get Access Token</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#win-about">About</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container" role="main">
        {% block contents %}

            <div class="row">
                <div class="col-md-12">

                </div>
            </div>

            <div class="row">
                <div class="progress" id="progress-bar">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                         aria-valuemin="0" aria-valuemax="100" style="width:100%">
                    </div>
                </div>

                <div id="box-issues">
                    <!-- Issues list will go here. -->
                </div>
            </div>
        {% endblock %}
    </div>


    <div class="modal fade" id="win-about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">About Issue Inspector</h4>
                </div>
                <div class="modal-body">
                    <p>This application allows you to inspect issues in your repositories that require your attention.</p>
                    <p>It could be helpful when you have to manage many repositories, to not to forget what issues you need to attend to.</p>
                    <p>
                        To start you need to generate an access token to be used instead of password to access repository data.<br>
                        This token should include access only to <i>Access public repositories</i> (<strong>public_repo</strong>).
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="{{ STATIC_URL }}js/xross/xross.min.js"></script>
    <script type="text/javascript">
        /*global xross */
        $(function(){
            var progress = $('#progress-bar');

            progress.hide();

            $('#inspect').on('xrossajaxbefore', function() {
                progress.show();

            }).on('xrossajaxafter', function() {
                progress.hide();
            });

            xross.automate();
        });

    </script>
</body>
</html>
