{% include '@dashnex/header.twig' %}

<div ng-controller="proxyController" ng-init="proxies = {{ proxies | json_encode() }}">

    <header class="dashnex-frame-header">
        <h3 class="pull-left">Proxies</h3>

        <div class="dashnex-frame-primary-actions">

            <button class="btn btn-primary" data-toggle="modal"
                    data-target="#add-proxy-modal"
                    ng-class="{'disabled' : requestInProgress}"
                    ng-click="currentProxy = null">
                Add Proxy
            </button>

            <button class="btn btn-primary" data-toggle="modal"
                    data-target="#bulk-add-proxy-modal"
                    ng-class="{'disabled' : requestInProgress}"
                    ng-click="bulkList = ''">
                Bulk Add
            </button>
            <img 
                id="img-loading" 
                ng-show="requestInProgress" 
                src="{{ asset( 'dashnex', 'img/small_loading.gif') }}"
            />

        </div>

        <div class="clearfix"></div>

        <div class="dashnex-frame-container no-margin">
            <table class="table dashnex-proxy-table">
                <thead>
                <tr{% if proxy_blocks_found %} class="dashnex-blocked-proxy-row"{% endif %}>
                    <th class="dashnex-proxy-column">IP</th>
                    <th class="dashnex-proxy-column">Port</th>
                    <th class="dashnex-proxy-column">Username</th>
                    <th class="dashnex-proxy-column">Password</th>
                    {% if proxy_blocks_found %}<th class="dashnex-proxy-column">Blocked by</th>{% endif %}
                    <th class="dashnex-proxy-column">Actions</th>
                </tr>
                </thead>
            </table>
        </div>
    </header>

    <div class="dashnex-frame-container no-margin">

        <div 
            ng-include="'proxy/active-list.html'" 
            ng-init="proxyBlocksFound = {{ proxy_blocks_found ? 1 : 0 }}">
        </div>

        <div 
            ng-include="'proxy/inactive-list.html'" 
            ng-init="proxyBlocksFound = {{ proxy_blocks_found ? 1 : 0 }}">
        </div>

    </div>

    <div class="dashnex-frame-popover">
        <div class="dashnex-frame-popover-arrow"></div>
        <h3 class="dashnex-frame-popover-title">Help</h3>

        <div class="dashnex-frame-popover-content">
            <p><a ng-click="modal.show('#dashnex-support-modal')" href="javascript:void(0)">I need to email support.</a></p>

            <p><a ng-click="modal.show('#dashnex-proxy-offer-modal')" href="javascript:void(0)">I need to buy proxies.</a></p>
        </div>
    </div>

    {% include '@dashnex/proxies/modal/add.twig' %}
    {% include '@dashnex/proxies/modal/bulk-add.twig' %}
    {% include '@dashnex/proxies/modal/delete.twig' %}
    {% include '@dashnex/proxies/modal/delete-all.twig' %}
    {% include '@dashnex/proxies/modal/get-proxies.twig' %}
    {% include '@dashnex/modal/support.twig' %}
</div>