<div class="container-fluid form-horizontal" ng-controller="Wizdom365ChangeMappingsController as vm">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Change mappings' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button class="btn btn-primary wide-config-btn"
                    ng-disabled="vm.applying"
                    ng-click="vm.applyMappings()">
                {{vm.applying ? 'Applying' : 'Apply mappings' | translate}}
            </button>
            <button class="btn"
                    ng-click="showingPre = !showingPre">
                {{showingPre ? 'Hide request body' : 'Preview request body' | translate}}
            </button>
        </div>
    </div>

    <pre ng-show="showingPre">{{vm.mappings | json}}</pre>

    <div class="panel panel-default lt-module-page__content-panel">
        <div class="panel-heading ng-binding">
            {{'Admin permission' | translate}}
        </div>

        <div class="form-group row">
            <div class="col-sm-4">
                <label>{{'Remove admin permissions' | translate}}</label>
            </div>
            <div class="col-sm-8">
                <input type="checkbox" id="socialFeature" ng-model="vm.mappings.clearAdminPermissions">
            </div>
        </div>
    </div>

    <div class="panel panel-default lt-module-page__content-panel">
        <div class="panel-heading ng-binding">
            {{'Users' | translate}}
        </div>
        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'From' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'To' | translate}}</div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="user in vm.mappings.users">
                <div class="lt-flextable__row col1/2">
                    <input type="text" class="form-control" ng-change="vm.userChange(user)" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 100, 'blur': 0 } }" ng-model="user.from" placeholder="{{'From (ex. username@domain.com)' | translate}}">
                </div>
                <div class="lt-flextable__row col1/2">
                    <input type="text" class="form-control" ng-change="vm.userChange(user)" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 100, 'blur': 0 } }" ng-model="user.to" placeholder="{{'To (ex. username-new@domain-new.com)' | translate}}">
                </div>
            </li>
        </ul>
    </div>

    <div class="panel panel-default lt-module-page__content-panel">
        <div class="panel-heading ng-binding">
            {{'Domains' | translate}}
        </div>
        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'From' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'To' | translate}}</div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="domain in vm.mappings.domains">
                <div class="lt-flextable__row col1/2 pr-3">
                    <label class="control-label text-truncate" title="{{domain.from}}">{{domain.from}}</label>
                </div>
                <div class="lt-flextable__row col1/2">
                    <input type="text" class="form-control" ng-model="domain.to" placeholder="{{'To' | translate}}">
                </div>
            </li>
        </ul>
    </div>

    <div class="panel panel-default lt-module-page__content-panel">
        <div class="panel-heading ng-binding">
            {{'Urls' | translate}}
        </div>
        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'From' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'To' | translate}}</div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="url in vm.mappings.urls">
                <div class="lt-flextable__row col1/2">
                    <label class="control-label text-truncate" title="{{url.from}}">{{url.from}}</label>
                </div>
                <div class="lt-flextable__row col1/2">
                    <input type="text" class="form-control" ng-model="url.to" placeholder="{{'To' | translate}}">
                </div>
            </li>
        </ul>
    </div>
</div>
