<section class="content-header">
    <h1>Domain Rules</h1>
</section>
<section class="content">
    <p>
        If you have the same login across multiple different website domains, you can mark the website as "equivalent".
        "Global" domains are ones already created for you by bitwarden.
    </p>
    <form name="customForm" ng-submit="customForm.$valid && saveCustom()" api-form="customPromise" autocomplete="off">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">Custom <span class="hidden-xs">Equivalent Domains</span></h3>
                <div class="box-tools">
                    <button type="button" class="btn btn-primary btn-sm btn-flat" ng-click="addEdit(null)">
                        <i class="fa fa-fw fa-plus-circle"></i> New Domain
                    </button>
                </div>
            </div>
            <div class="box-body no-padding">
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-vmiddle">
                        <tbody ng-if="equivalentDomains.length">
                            <tr ng-repeat="customDomain in equivalentDomains track by $index">
                                <td style="width: 70px;">
                                    <div class="btn-group" data-append-to="body">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            <i class="fa fa-cog"></i> <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#" stop-click ng-click="addEdit($index)">
                                                    <i class="fa fa-fw fa-pencil"></i> Edit
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" stop-click ng-click="delete($index)" class="text-red">
                                                    <i class="fa fa-fw fa-trash"></i> Delete
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                                <td>{{customDomain}}</td>
                            </tr>
                        </tbody>
                        <tbody ng-if="!equivalentDomains.length">
                            <tr>
                                <td>No domains to list.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary btn-flat" ng-disabled="customForm.$loading">
                    <i class="fa fa-refresh fa-spin loading-icon" ng-show="customForm.$loading"></i>Save
                </button>
            </div>
        </div>
    </form>

    <form name="globalForm" ng-submit="globalForm.$valid && saveGlobal()" api-form="globalPromise" autocomplete="off">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">Global <span class="hidden-xs">Equivalent Domains</span></h3>
            </div>
            <div class="box-body no-padding">
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-vmiddle">
                        <tbody ng-if="globalEquivalentDomains.length">
                            <tr ng-repeat="globalDomain in globalEquivalentDomains">
                                <td style="width: 70px;">
                                    <div class="btn-group" data-append-to="body">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                            <i class="fa fa-cog"></i> <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#" stop-click ng-if="!globalDomain.excluded" 
                                                   ng-click="toggleExclude(globalDomain)">
                                                    <i class="fa fa-fw fa-remove"></i> Exclude
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" stop-click ng-if="globalDomain.excluded"
                                                   ng-click="toggleExclude(globalDomain)">
                                                    <i class="fa fa-fw fa-plus"></i> Include
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" stop-click ng-click="customize(globalDomain)">
                                                    <i class="fa fa-fw fa-cut"></i> Customize
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                                <td ng-class="{strike: globalDomain.excluded}">{{::globalDomain.domains}}</td>
                            </tr>
                        </tbody>
                        <tbody ng-if="!globalEquivalentDomains.length">
                            <tr>
                                <td>No domains to list.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary btn-flat" ng-disabled="globalForm.$loading">
                    <i class="fa fa-refresh fa-spin loading-icon" ng-show="globalForm.$loading"></i>Save
                </button>
            </div>
        </div>
    </form>
</section>