<div class="tab-wrap">
    <div class="tab-label-content" id="tab1-content">
        <label ng-click="tabActive = 1;" class="tab-title">{{ 'general' | translate }}</label>
        <div class="tab-content" ng-class="{'active': tabActive === 1}">
            <div class="group">
                <input type="text" ng-model="settings.refreshTime"
                       required ng-debounce="1000">
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'refresh_timer' | translate}}</label>
            </div>
            <div class="ignored_sites">
                <label>{{'ignored_sites' | translate}}</label>
                <ul class="ignored_sites">
                    <li ng-repeat="site in settings.ignored_sites">
                        <span class="site">{{site}}</span>
                        <i class="mdi mdi-delete pull-right" ng-click="removeSite(site)"></i>
                    </li>
                    <li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
                </ul>
                <div class="group" ng-show="settings.default_vault != ''">
                    <input type="text"
                           ng-model="ignoreSite" ng-enter="addSite(ignoreSite)"
                           placeholder="{{'ignore_site_placeholder' | translate}}">
                    <span class="highlight"></span>
                    <span class="bar"></span>
                </div>
            </div>
            <div class="group">
                <select id="firstTab" class="input-md" ng-model="settings.no_results_found_tab">
                    <option value="list">List</option>
                    <option value="search">Search</option>
                    <option value="add">Add</option>
                    <option value="generate">Generate</option>
                </select>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'select_password_picker_default_tab' | translate}}</label>
            </div>
            <div ng-init="showAdvanced = false" ng-click="showAdvanced = !showAdvanced" style="margin-bottom: 10px; cursor: pointer">
                <i class="fa" ng-class="{'fa-caret-down': showAdvanced, 'fa-caret-right': !showAdvanced}"></i>
                    <span ng-show="showAdvanced">{{ 'hide_adv' | translate}}</span>
                    <span ng-show="!showAdvanced">{{ 'show_adv' | translate }}</span>
            </div>
            <div ng-show="showAdvanced">
                <div class="switch-row">
                    <input type="checkbox" id="ignore_protocol" ng-model="settings.ignoreProtocol" class="switch-input">
                    <label for="ignore_protocol" class="switch-label">{{'ignore_protocol' | translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="ignore_subdomain" ng-model="settings.ignoreSubdomain" class="switch-input">
                    <label for="ignore_subdomain" class="switch-label">{{'ignore_subdomain' | translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="ignore_port" ng-model="settings.ignorePort" class="switch-input">
                    <label for="ignore_port" class="switch-label">{{'ignore_port' | translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="ignore_path" ng-model="settings.ignorePath" class="switch-input">
                    <label for="ignore_path" class="switch-label">{{'ignore_path' | translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="enable_autofill" ng-model="settings.enableAutoFill" class="switch-input">
                    <label for="enable_autofill" class="switch-label">{{'enable_autofill' | translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="enable_autosubmit" ng-model="settings.enableAutoSubmit" class="switch-input">
                    <label for="enable_autosubmit" class="switch-label">{{'enable_autosubmit' | translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="enable_update_url" ng-model="settings.enableUpdateUrl" class="switch-input">
                    <label for="enable_update_url" class="switch-label">{{'enable_update_url' | translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="enable_password_picker" ng-model="settings.enablePasswordPicker"
                           class="switch-input">
                    <label for="enable_password_picker" class="switch-label">{{'enable_password_picker' |
                        translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="password_picker_gotolist" ng-model="settings.passwordPickerGotoList"
                           class="switch-input">
                    <label for="password_picker_gotolist" class="switch-label">{{'password_picker_gotolist' |
                        translate}}</label>
                </div>
                <div class="switch-row">
                    <input type="checkbox" id="enable_debug" ng-model="settings.debug" class="switch-input">
                    <label for="enable_debug" class="switch-label">{{'enable_debug' | translate}}</label>
                </div>
            </div>
            <div class="clearfix"></div>
            <button class="md-btn default" ng-click="saveSettings(true)" ng-disabled="saving" style="margin-left: 0;">
        <span>
            <i ng-show="saving"
               ng-class="{'fa-spinner fa-spin': saving}"
               class="fa"></i>
            {{'save' | translate}}
        </span>
            </button>
            <button class="md-btn" ng-click="cancel()">
                <span>{{'cancel' | translate}}</span>
            </button>
            <div class="version">
                {{extension}}
            </div>
        </div>
    </div>

    <div class="tab-label-content account" id="tab2-content">
        <label ng-click="tabActive = 2;" class="tab-title">{{ 'accounts' | translate }}</label>
        <div class="tab-content" ng-class="{'active': tabActive === 2}">
            <div class="list">
                <div class="list-item" ng-repeat="account in settings.accounts" style="padding-left: 0;">
                    <div class="title">
                        {{account.nextcloud_username}} @ {{account.nextcloud_host}}
                    </div>
                    <div class="info">
                        {{ account.vault.name}}
                    </div>
                    <div class="edit" ng-click="removeAccount(credential)">
                        <div class="mdi mdi-delete"></div>
                    </div>
                </div>
            </div>

            <div class="btn-floating btn-large fab" ng-click="addAccount()">
                <i class="mdi mdi-plus"></i>
            </div>
        </div>


    </div>
    <div class="slide" ng-class="{'right': tabActive === 2}"></div>
</div>