<!DOCTYPE html>
<html lang="en">
<head>
    <title>ClearURLs</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-dialog.min.css">
    <link rel="stylesheet" type="text/css" href="../css/switchButtons.css">
    <link rel="stylesheet" type="text/css" href="../css/core.css">
</head>
<body>
    <div class="container-fluid"
    style="background: url('../img/img-noise-361x370.png');background-size: auto;">
    <div class="row">
        <nav class="col-sm-1 navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <span class="navbar-brand">
                        <span class="pull-left"><img src="../img/clearurls.svg"
                            width="30" height="30" alt=""></span>
                            <span style="color: #FF7800;" class="pull-right">
                                ClearURLs
                            </span><br />
                            <span class="label label-warning pull-left small-version"
                            id="version"></span>
                        </span>
                    </div>
                </div>
            </nav>
        </div>

        <div class="row" id="incognito" style="display:none;">
            <div class="col-sm-1">
                <b class="text-justify word-wrap" style="color: #FF7800;">
                    The graphical elements of ClearURLs do not work in Incognito mode.<br />
                    ClearURLs still cleans all URLs.<br />
                    If you want to change settings, you must do so in a non-private tab.<br />
                    These changes will then be taken over here.
                </b>
            </div>
        </div>
        <div id="dialog"></div>
        <div class="row" id="config_section">
            <div class="col-sm-1">
                <a id="settings" target="_blank"><span class="pull-right glyphicon glyphicon-cog"></span></a>
                <h5><b id="configs_head"></b></h5>
                <label class="switch">
                    <input type="checkbox" id="globalStatus">
                    <span class="slider round"></span>
                    <label id="configs_switch_filter"></label>
                </label>
                <br>
                <label class="switch">
                    <input type="checkbox" id="logging">
                    <span class="slider round"></span>
                    <label id="configs_switch_log"></label>
                </label>
                <br>
                <label class="switch">
                    <input type="checkbox" id="tabcounter">
                    <span class="slider round"></span>
                    <label id="configs_switch_badges"></label>
                </label>
                <br>
                <label class="switch">
                    <input type="checkbox" id="statistics">
                    <span class="slider round"></span>
                    <label id="configs_switch_statistics"></label>
                </label>
                <div class="clearfix"></div>
                <br />
            </div>
        </div>

        <div class="row" id="statistic_section">
            <div class="col-sm-1">
                <h5><b id="statistics_head"></b></h5>

                <div class="progress">
                    <div class="progress-bar progress-bar-danger progress-bar-striped"
                    role="progressbar" style="width: 0%" id="progress_blocked"></div>
                    <div class="progress-bar progress-bar-info progress-bar-striped"
                    role="progressbar" style="width: 100%" id="progress_non_blocked"></div>
                </div>

                <div>
                    <span class="pull-left" id="statistics_elements"></span>
                    <span class="pull-right text-info"
                    id="statistics_total_elements"></span>
                    <div class="clearfix"></div>
                </div>

                <div>
                    <span class="pull-left" id="statistics_blocked"></span>
                    <span class="pull-right text-danger"
                    id="statistics_value"></span>
                    <div class="clearfix"></div>
                </div>

                <div>
                    <span class="pull-left" id="statistics_percentage"></span>
                    <span class="pull-right text-success"
                    id="statistics_value_global_percentage"></span>
                    <div class="clearfix"></div>
                </div>
                <br />
                <div class="text-center">
                    <button type="button" id="reset_counter_btn"
                    class="btn btn-danger btn-xs">
                </button>
                <div class="clearfix"></div>
                <br />
            </div>
        </div>
    </div>

    <div class="row" id="status_section">
        <div class="col-sm-1">
            <h5><b id="rules_status_head"></b></h5>
            <div class="text-center">
                <a href="https://gitlab.com/KevinRoebert/ClearUrls/commits/master/data/data.json"
                id="hashStatus" class="btn btn-primary btn-xs" target="_blank"></a>
            </div>
            <div class="clearfix"></div>
            <br />
        </div>
    </div>
    <br />
    <div class="row" id="log_section">
        <div class="col-sm-1">
            <div class="text-center">
                <a type="button" id="loggingPage" target="_blank"
                class="btn btn-default btn-sm btn-block"></a>
            </div>
        </div>
    </div>
    <br />
    <div class="row" id="report_section">
        <div class="col-sm-1">
            <div class="text-center">
                <a type="button" id="reportButton" target="_blank"
                class="btn btn-warning btn-sm btn-block"></a>
        </div>
    </div>
    <br />
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="application/javascript" src="../browser-polyfill.js"></script>
<script src="../external_js/jquery-3.2.1.min.js"></script>
<script src="../external_js/bootstrap.min.js"></script>
<script src="../external_js/bootstrap-dialog.min.js"></script>
<script src="../core_js/popup_new.js"></script>
<script src="../core_js/write_version.js"></script>
</body>
</html>