{% extends "layout.html" %}

{% block title %}
    Issue Label Bot
{% endblock %}

{% block body %}
    <div class="jumbotron text-center bg-dark text-white">
        <h1 class="display-4"><i class="fas fa-robot"></i> Issue Label Bot</h1>
        <p>A bot that labels GitHub issues automatically with machine learning.</p>
        <p>Written by <a href="https://github.com/hamelsmu"> <span style="color:rgb(150, 214, 249)">@hamelsmu</span></a> <a href="https://github.com/inc0"><span style="color:rgb(150, 214, 249)">@inc0</span></a> <a href="https://github.com/jlewi"><span style="color:rgb(150, 214, 249)">@jlewi</span></a></p>
        <p>Stats: <span style="color: rgb(245, 196, 196)"><span style="font-weight:bold">{{ num_active_users }}</span> active users, <span style="font-weight:bold">{{ num_repos }}</span> active repos and <span style="font-weight:bold">{{ num_predictions }}</span> predictions.</span></p>
        <span style="color:grey">Active means at least one issue opened after installing the app.</span>
    </div>
    <div class="row  my-flex-card">
        <div class="col-sm-12">
            <p class="lead">This <a href="https://medium.com/@hamelhusain/mlapp-419f90e8f007?source=friends_link&sk=760e18a2d6e60999d7eb2887352a92a8">blog post</a> provides background behind the motivation for this app. Issue Label Bot automatically labels issues as either a feature request, bug or question. Want to try it out before installing? <a href="https://github.com/hamelsmu/Issue-Label-Bot-Examples/issues">Open an issue here.</a></p>
        </div>
        <div class="col-sm-4">
            <div class="card bg-light mb-3 h-100" style="width: 100%">
                <div class="card-body">
                    <h3 class="card-title"><a href="https://github.com/marketplace/issue-label-bot"><i class="fas fa-cog"></i> Install this app</a> </h3>
                    <p class="card-text">Only works on public GitHub repos.</p>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card bg-light mb-3 h-100" style="width: 100%">
                <div class="card-body">
                    <h3 class="card-title"><a href="https://github.com/hamelsmu/MLapp">See the code on <i class="fab fa-github"></i></a> </h3>
                    <p class="card-text">Includes the code for this website, the GitHub app, and model training steps.</p>
                    <p class="card-text">If you have any problems, suggestions or comments please <a href="https://github.com/hamelsmu/MLapp/issues">open an issue!</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card bg-light mb-3 h-100" style="width: 100%">
                <div class="card-body align-items-center">
                    <h3 class="card-title"><i class="fas fa-database"></i> View Predictions</h3>
                    <p class="card-text">See example predictions from random repos from the drop down menu below:</p>
                    {% if results %}
                    <div class="dropdown text-center">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Select a repo
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            {% for result in results %}
                            <a class="dropdown-item" href=" {{ url_for('data', owner=result[1], repo=result[0]) }}">{{ result[1] }}/{{ result[0] }}</a>
                            {% endfor %}  
                        </div>
                    </div>
                    {% endif %} 
                    <br>
                     
                </div>
            </div>
        </div>
    </div>
    <br>
    <h5>Customize the naming of labels:</h5>
    <p>To alias the labels <i>bug, label,</i> and <i>feature_request</i>, place a yaml file with this name and path in your repo:  
        <span style="color:indianred; font-weight: bold">/.github/issue_label_bot.yaml </span> 
        See <a href="https://github.com/hamelsmu/MLapp/blob/master/.github/issue_label_bot.yaml">this example yaml file.</a>
        If the yaml fails to parse or an incorrect schema is used, the app will revert back to default label names.
    </p>
    <h6>Additional routes for existing users:</h6>
    <p class="card-text" style="font-size: small; margin: 0">See a sample of users with an active installation: <a href="https://label-bot-prod.mlbot.net/users" style="color:chocolate">https://label-bot-prod.mlbot.net/users</a></p>
    <p class="card-text" style="font-size: small; margin: 0">See all repos w/installations for a specific user: <span style="color:chocolate">https://label-bot-prod.mlbot.net/repos/{username}</span></p> 
    <p class="card-text" style="font-size: small; margin: 0">See the last 50 predictions for a specific repo: <span style="color:chocolate">https://label-bot-prod.mlbot.net/data/{username}/{repo}</span></p>  

{% endblock %}