@extends('layouts.app')

@push('inlinescripts')
<script>
window.InitialState.Domains =  @json($domains);
window.InitialState.User = @json(Auth::user());
window.InitialState.IsSiteAdmin = @json(Auth::user()->hasRole('admin'));
</script>
@endpush

@section('content')
<div id='main'>
<b-container>
    <b-row>
        <b-col class='domains' sm="4">
            <!-- domains -->
            <b-list-group>
                <b-list-group-item button variant='primary' @click='active_domain = null' :active='active_domain == null'><i class="fas fa-home"></i> Basic settings </b-list-group-item>
            </b-list-group>
            <b-list-group class='mt-3'>
                <b-list-group-item button @click='select_domain(d)' v-for='d in domains' :active='d == active_domain'>@{{ d.domain }}</b-list-group-item>
            </b-list-group>
        </b-col>
        <b-col class='operations' md="8">
            <b-card no-body v-if='active_domain != null'>
                <b-tabs card>
                    <b-tab title="Aliases">
                        <div>
                            <b-button class='w-100' variant='primary' v-b-toggle="'collapse-alias-new'"><i class="fas fa-plus"></i> Create new alias</b-button>
                        </div>
                        <b-collapse :accordion="'aliases-'+active_domain.domain" :id="'collapse-alias-new'">
                            <b-card>
                            <b-container>
                                <b-row class='mt-3'>
                                    <b-col cols=3>
                                        Source address
                                    </b-col>
                                    <b-col cols=6>
                                        <b-form-input size='sm'
                                            v-model='newalias.source'  
                                            :state='newalias.validators.source'
                                                @change='alias_check_newsource()' 
                                                @keyup='alias_check_newsource()' 
                                                type='text'></b-form-input>
                                    </b-col>
                                    <b-col cols=3> @@{{active_domain.domain}}</b-col>
                                </b-row>
                                <b-row class='mt-3'>
                                    <b-col cols=4>Destination</b-col>
                                    <b-col cols=4>Comment</b-col>
                                    <b-col cols=2>Enabled</b-col>
                                    <b-col cols=2></b-col>
                                </b-row>
                                <b-row class='mt-2'>
                                    <b-col cols=4>
                                            <b-form-input 
                                                size='sm'
                                                v-model='newalias.destination'  
                                                type='text'></b-form-input>
                                        </b-col>
                                        <b-col cols=4>
                                            <b-form-input 
                                                size='sm'
                                                v-model='newalias.comment'  
                                                type='text'></b-form-input>
                                        </b-col>
                                        <b-col cols=2>
                                            <b-form-checkbox v-model='newalias.enabled'></b-form-checkbox>
                                        </b-col>
                                </b-row>                                    
                                <b-row class='mt-2'>
                                    <b-col cols=10></b-col>
                                    <b-col cols=2>
                                        <b-button 
                                            variant='primary' 
                                            :disabled='!(newalias.validators.source)'
                                            @click='alias_create($event)'
                                            ><i class='fas fa-plus'></i></b-button>
                                    </b-col>
                                </b-row>
                            </b-container>
                            </b-card>
                        </b-collapse>
                        <br>
                        <b-container class='border-top' no-body v-for='a in aliases'>
                            <b-row class='mt-3 mb-3' v-b-toggle="'collapse-alias-'+a.source">
                                <a href='#' onclick='return false;' class='when-opened'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-down'></i>
                                    @{{a.source}}@@{{active_domain.domain}}
                                </a>
                                <a href='#' onclick='return false;' class='when-closed'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-right'></i>
                                    @{{a.source}}@@{{active_domain.domain}}
                                </a>
                            </b-row>
                            <b-collapse :accordion="'aliases-'+active_domain.domain" :id="'collapse-alias-'+a.source">
                            <b-row class='mb-3'>
                                <b-container>
                                    <b-row>
                                        <b-col cols=4>Destination</b-col>
                                        <b-col cols=4>Comment</b-col>
                                        <b-col cols=2>Enabled</b-col>
                                        <b-col cols=2></b-col>
                                    </b-row>
                                    <b-row v-for='d in a.dest' class='mt-1'>
                                        <b-col cols=4>
                                            <b-form-input 
                                                size='sm'
                                                :class='{ "border-info": d.changed.dest, "text-info": d.changed.dest}'
                                                @change='alias_dest_changed(d,"dest")'
                                                @keyup='alias_dest_changed(d,"dest")'
                                                v-model='d.destination'  
                                                type='text'></b-form-input>
                                        </b-col>
                                        <b-col cols=4>
                                            <b-form-input 
                                                size='sm'
                                                :class='{ "border-info": d.changed.comment, "text-info": d.changed.comment}'
                                                @change='alias_dest_changed(d,"comment")'
                                                @keyup='alias_dest_changed(d,"comment")'
                                                v-model='d.comment'  
                                                type='text'></b-form-input>
                                        </b-col>
                                        <b-col cols=2>
                                            <b-form-checkbox 
                                                :class='{ "checkbox-info": d.changed.enabled}'
                                                @change='alias_dest_changed(d,"enabled")' 
                                                v-model='d.enabled'
                                                ></b-form-checkbox>
                                        </b-col>
                                        <b-col cols=2>
                                            <b-button size='sm' variant='primary' :disabled='!(d.changed.dest || d.changed.comment || d.changed.enabled)'
                                                @click='alias_update_dest(a,d,$event)'><i class='fas fa-save'></i></b-button>
                                            <b-button size='sm' variant='danger' v-b-modal="'delete-al-modal-'+d.id"><i class='fas fa-trash'></i></b-button>
                                        </b-col>
                                        <b-modal 
                                            :id="'delete-al-modal-'+d.id"
                                            title="Confirm Delete"
                                            @ok="alias_del_dest(a,d,$event)"
                                            >Are you sure you want to delete the destination <strong>@{{d.destination}}</strong> for alias <strong>@{{a.source}}@@{{active_domain.domain}}</strong>?
                                            <template v-slot:modal-footer="{ ok, cancel, hide }">
                                                <b-button @click='cancel()'>Cancel</b-button>
                                                <b-button variant='danger' @click='ok()'>Delete</b-button>
                                            </template>
                                        </b-modal>
                                    </b-row>
                                    <b-row class='mt-1'>
                                        <b-col cols=4>
                                            <b-form-input 
                                                size='sm'
                                                v-model='a.newdest.destination'  
                                                type='text'></b-form-input>
                                        </b-col>
                                        <b-col cols=4>
                                            <b-form-input 
                                                size='sm'
                                                v-model='a.newdest.comment'  
                                                type='text'></b-form-input>
                                        </b-col>
                                        <b-col cols=2>
                                            <b-form-checkbox v-model='a.newdest.enabled'></b-form-checkbox>
                                        </b-col>
                                        <b-col cols=2>
                                            <b-button size='sm' variant='primary' :disabled='a.newdest.destination == ""' @click='alias_add_dest(a,$event)'><i class='fas fa-plus'></i></b-vutton>
                                        </b-col>
                                    </b-row>
                                </b-container>
                            </b-row>
                            </b-collapse>
                        </b-container>
                    </b-tab>
                    <b-tab title="Accounts">
                        <div>
                            <b-button class='w-100' variant='primary' v-b-toggle="'collapse-account-new'"><i class="fas fa-plus"></i> Create new account</b-button>
                        </div>
                        <b-collapse :accordion="'accounts-'+active_domain.domain" :id="'collapse-account-new'">
                            <b-card>
                            <b-container>
                                <b-row>
                                    <b-col>Username</b-col>
                                    <b-col>
                                        <b-form-input 
                                            v-model='newaccount.username'  
                                            :state='newaccount.validators.username'
                                                @change='account_check_newusername()' 
                                                @keyup='account_check_newusername()' 
                                                type='text'></b-form-input>
                                    </b-col>
                                    <b-col></b-col>
                                </b-row>
                                <b-row><b-col>&nbsp;</b-col></b-row>
                                <b-row>
                                    <b-col>Options</b-col>
                                    <b-col>
                                        <b-form-checkbox v-model='newaccount.enabled'>Enabled</b-form-checkbox>
                                        <b-form-checkbox v-model='newaccount.sendonly'>Send only</b-form-checkbox>
                                    </b-col>
                                    <b-col></b-col>
                                </b-row>
                                <b-row><b-col>&nbsp;</b-col></b-row>
                                <b-row>
                                    <b-col>Quota</b-col>
                                    <b-col>
                                        <b-form-input type='number' v-model='newaccount.quota'>Quota</b-form-input>
                                    </b-col>
                                    <b-col> MB</b-col>
                                </b-row>
                                <b-row><b-col>&nbsp;</b-col></b-row>
                                <b-row>
                                    <b-col>New password</b-col>
                                    <b-col>
                                        <b-form-input 
                                            type='password' 
                                            v-model='newaccount.pass1' 
                                            @keyup="account_check_newpassword()" 
                                            :state='newaccount.validators.pass1' 
                                            autocomplete='off'></b-form-input>
                                    </b-col>
                                    <b-col> </b-col>
                                </b-row>
                                <b-row>
                                    <b-col>Confirm password</b-col>
                                    <b-col>
                                        <b-form-input 
                                            type='password' 
                                            v-model='newaccount.pass2' 
                                            @keyup="account_check_newpassword()" 
                                            :state='newaccount.validators.pass2' 
                                            autocomplete='off'></b-form-input>
                                    </b-col>
                                    <b-col> </b-col>
                                </b-row>
                                <b-row>
                                    <b-col>
                                        <b-button 
                                            variant='primary' 
                                            :disabled='!(newaccount.validators.username && newaccount.validators.pass1 && newaccount.validators.pass2)'
                                            @click='account_create'
                                            >Add</b-button>
                                    </b-col>
                                </b-row>
                            </b-container>
                            </b-card>
                        </b-collapse>
                        <br>
                        <b-container class='border-top' no-body v-for='a in accounts'>
                            <b-row class='mt-3 mb-3' v-b-toggle="'collapse-account-'+a.id">
                                <a href='#' onclick='return false;' class='when-opened'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-down'></i>
                                    @{{a.username}}@@{{a.domain}}
                                </a>
                                <a href='#' onclick='return false;' class='when-closed'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-right'></i>
                                    @{{a.username}}@@{{a.domain}}
                                </a>
                            </b-row>
                            <b-collapse :accordion="'accounts-'+active_domain.domain" :id="'collapse-account-'+a.id">
                            <b-row class='mt-3'>
                                <b-container>
                                    <b-row>
                                        <b-col>Username</b-col>
                                        <b-col>
                                            <b-form-input 
                                                v-model='a.newusername' 
                                                :disabled='!a.changeusername' 
                                                :state='a.validators.username' 
                                                @change='account_check_username(a)' 
                                                @keyup='account_check_username(a)' 
                                                type='text'></b-form-input>
                                        </b-col>
                                    </b-row>
                                    <b-row><b-col>&nbsp;</b-col></b-row>
                                    <b-row>
                                        <b-col>Options</b-col>
                                        <b-col>
                                            <b-form-checkbox v-model='a.enabled'>Enabled</b-form-checkbox>
                                            <b-form-checkbox v-model='a.sendonly'>Send only</b-form-checkbox>
                                        </b-col>
                                        <b-col></b-col>
                                    </b-row>
                                    <b-row><b-col>&nbsp;</b-col></b-row>
                                    <b-row>
                                        <b-col>Quota</b-col>
                                        <b-col>
                                            <b-form-input type='number' v-model='a.quota'>Quota</b-form-input>
                                        </b-col>
                                        <b-col> MB</b-col>
                                    </b-row>
                                    <b-row><b-col>&nbsp;</b-col></b-row>
                                    <b-row>
                                        <b-col>New password (optional)</b-col>
                                        <b-col>
                                            <b-form-input 
                                                type='password' 
                                                v-model='a.pass1' 
                                                @keyup="account_check_password(a)" 
                                                @change="account_check_password(a)" 
                                                :state='a.validators.pass1' 
                                                autocomplete='off'></b-form-input>
                                        </b-col>
                                        <b-col> </b-col>
                                    </b-row>
                                    <b-row>
                                        <b-col>Confirm password</b-col>
                                        <b-col>
                                            <b-form-input 
                                                type='password' 
                                                v-model='a.pass2' 
                                                @keyup="account_check_password(a)" 
                                                @change="account_check_password(a)"  
                                                :state='a.validators.pass2' 
                                                autocomplete='off'></b-form-input>
                                        </b-col>
                                        <b-col> </b-col>
                                    </b-row>
                                    <b-row>
                                        <b-col>
                                            <b-button 
                                                variant='primary' 
                                                :disabled='!((a.validators.username !== false) && (a.validators.pass1 !== false) && (a.validators.pass2 !== false))' 
                                                @click='account_update(a,$event)'>Save</b-button>
                                        </b-col>
                                        <b-col></b-col>
                                        <b-col>
                                        <b-button 
                                                variant='danger' 
                                                v-b-modal="'delete-acc-modal-'+a.id"><i class='fas fa-trash'></i></b-button>
                                        </b-col>

                                    </b-row>
                                </b-container>
                            </b-row>
                            </b-collapse>
                            <b-modal 
                                :id="'delete-acc-modal-'+a.id"
                                title="Confirm Delete"
                                @ok="account_delete(a,$event)"

                                >Are you sure you want to delete the account <strong>@{{a.username}}@@{{a.domain}}</strong>?
                                <template v-slot:modal-footer="{ ok, cancel, hide }">
                                    <b-button @click='cancel()'>Cancel</b-button>
                                    <b-button variant='danger' @click='ok()'>Delete</b-button>
                                </template>
                                </b-modal>
                        </b-container>
                    </b-tab>
                    <b-tab title="Domain admins">
                        <b-container >
                            <b-row v-for='a in admins' class='border-bottom mt-2 pb-2'>
                                <b-col>@{{a.name}}</b-col>
                                <b-col>@{{a.email}}</b-col>
                                <b-col>
                                    <b-form-select v-if='(isSiteAdmin || domainRole == "own") && a.id != user.id'
                                        size='sm' 
                                        :class='{ "border-info": a.changed.role, "text-info": a.changed.role}' 
                                        v-model='a.pivot.role'
                                         @change='a.changed.role = true'
                                         :options="{'own':'Owner','edit': 'Manage','view': 'View',}"
                                         ></b-form-select>
                                    <strong v-else>@{{{'own':'Owner','edit': 'Manager','view': 'Viewer',}[a.pivot.role]}}</strong>
                                </b-col>
                                <b-col>
                                    <b-button v-if='(isSiteAdmin || domainRole == "own") && a.id != user.id' @click='admin_update(a,$event)' size='sm' variant='primary':disabled='a.changed.role == false'><i class='fas fa-pen'></i></b-button>
                                    <b-button v-if='(isSiteAdmin || domainRole == "own") && a.id != user.id' v-b-modal="'delete-adm-modal-'+a.id"size='sm' variant='danger'><i class='fas fa-trash'></i></b-button>
                                </b-col>
                                <b-modal 
                                    :id="'delete-adm-modal-'+a.id"
                                    title="Confirm Delete"
                                    @ok="admin_del(a,$event)"
                                    >Are you sure you want to revoke role <strong>@{{{'own':'Owner','edit': 'Manager','view': 'Viewer',}[a.pivot.role]}}</strong> for user <strong>@{{a.name}}</strong>?
                                    <template v-slot:modal-footer="{ ok, cancel, hide }">
                                        <b-button @click='cancel()'>Cancel</b-button>
                                        <b-button variant='danger' @click='ok()'>Delete</b-button>
                                    </template>
                                </b-modal>
                            </b-row>
                            <b-row class='mt-2' v-if='(isSiteAdmin || domainRole == "own")'>
                                <b-col>Add admin</b-col>
                                <b-col>
                                    <cool-select size='sm' v-model="newadmin.user" :placeholder="newadmin.user ? '' : 'Select user'" :items="availableUsers" item-value='id' item-text='name'/>
                                    </cool-select>
                                </b-col>
                                <b-col>
                                    <b-form-select size='sm' v-model='newadmin.role' :options="{'own':'Owner','edit': 'Manage','view': 'View',}"></b-form-select>
                                </b-col>
                                <b-col>
                                    <b-button size='sm' variant='primary' :disabled='newadmin.user == null' @click='admin_add($event)'><i class='fas fa-plus'></i></b-button>
                                </b-col>
                            </b-row>
                        </b-container>
                    </b-tab>
                    <b-tab v-if='isSiteAdmin' title='Operations'>
                        <b-container>
                            <b-row>
                                <b-col cols='4'>
                                    Rename domain to:
                                </b-col>
                                <b-col cols='4'>
                                    <b-form-input   size='sm'
                                                    type='text' 
                                                    :state='active_domain.validators.name'
                                                    v-model='active_domain.newname'
                                                    @change='active_domain.changed.name = true; active_domain.validators.name = !domain_exists(active_domain.newname)'
                                                    @keyup='active_domain.changed.name = true; active_domain.validators.name = !domain_exists(active_domain.newname)'
                                                    autocomplete='off'></b-form-input>
                                </b-col>
                                <b-col cols='4'>
                                    <b-button size='sm' variant='primary' :disabled='!(active_domain.changed.name && active_domain.validators.name)' @click='domain_rename($event)'><i class='fas fa-save'></i></b-button>
                                </b-col>
                            </b-row>
                            <b-row class='mt-3'>
                                <b-col cols='8'>
                                    Delete this domain
                                </b-col>
                                <b-col cols='4'>
                                    <b-button v-b-modal="'delete-domain-modal'"size='sm' variant='danger'><i class='fas fa-trash'></i></b-button>
                                </b-col>
                                <b-modal 
                                    :id="'delete-domain-modal'"
                                    title="Confirm Delete of domain"
                                    @ok="domain_delete($event)"
                                    >Are you sure you want to completele delete the domain <strong>@{{active_domain.domain}}</strong>?<br>
                                    This will delete all aliases accounts and cannot be recovered.
                                    <template v-slot:modal-footer="{ ok, cancel, hide }">
                                        <b-button @click='cancel()'>Cancel</b-button>
                                        <b-button variant='danger' @click='ok()'>Delete</b-button>
                                    </template>
                                </b-modal>                                
                            </b-row>
                        </b-container>
                    </b-tab>
                </b-tabs>
            </b-card>                
            <b-card no-body v-if='active_domain == null'>
                <b-tabs card>
                    <b-tab title = 'Welcome'>
                        On the left side you can see the domains you can manage.<br> Administrators can also add new domains and configure additional security settings in the <strong>Basic settings</strong> tab.
                    </b-tab>
                    <b-tab title="Add new domain" v-if='isSiteAdmin' >
                        <b-form-group
                            id="input-group-1"
                            label="Domain name"
                            label-for="input-1"
                            description="Enter the fully qualified domain name here"
                        >
                            <b-form-input
                            id="input-1"
                            v-model="create_domain_name"
                            type="text"
                            required
                            placeholder="Enter domain name"
                            :state="create_domain_name == ''?null:(domain_exists(create_domain_name)?false:true)"
                            ></b-form-input>
                        </b-form-group>
                        <b-button ref='createDomainButton' @click="create_domain" variant="primary" :disabled='create_domain_name == "" || domain_exists(create_domain_name)'>Add domain</b-button>
                    </b-tab>
                    <b-tab title="System Accounts" v-if='isSiteAdmin' >
                        <div>
                            <b-button class='w-100' variant='primary' v-b-toggle="'collapse-siteaccount-new'"><i class="fas fa-plus"></i> Create new system account</b-button>
                        </div>
                        <b-collapse :accordion="'siteaccounts'" :id="'collapse-siteaccount-new'">
                            <b-card>
                            <b-container>
                                <b-row>
                                    <b-col>Username</b-col>
                                    <b-col>
                                        <b-form-input 
                                            v-model='newsiteaccount.username'  
                                            :state='newsiteaccount.validators.username'
                                                @change='siteaccount_check_newusername()' 
                                                @keyup='siteaccount_check_newusername()' 
                                                type='text'></b-form-input>
                                    </b-col>
                                    <b-col></b-col>
                                </b-row>
                                <b-row><b-col>&nbsp;</b-col></b-row>
                                <b-row>
                                    <b-col>Options</b-col>
                                    <b-col>
                                        <b-form-checkbox v-model='newsiteaccount.enabled'>Enabled</b-form-checkbox>
                                        <b-form-checkbox v-model='newsiteaccount.sendonly'>Send only</b-form-checkbox>
                                    </b-col>
                                    <b-col></b-col>
                                </b-row>
                                <b-row><b-col>&nbsp;</b-col></b-row>
                                <b-row>
                                    <b-col>Quota</b-col>
                                    <b-col>
                                        <b-form-input type='number' v-model='newsiteaccount.quota'>Quota</b-form-input>
                                    </b-col>
                                    <b-col> MB</b-col>
                                </b-row>
                                <b-row><b-col>&nbsp;</b-col></b-row>
                                <b-row>
                                    <b-col>New password</b-col>
                                    <b-col>
                                        <b-form-input 
                                            type='password' 
                                            v-model='newsiteaccount.pass1' 
                                            @keyup="siteaccount_check_newpassword()" 
                                            :state='newsiteaccount.validators.pass1' 
                                            autocomplete='off'></b-form-input>
                                    </b-col>
                                    <b-col> </b-col>
                                </b-row>
                                <b-row>
                                    <b-col>Confirm password</b-col>
                                    <b-col>
                                        <b-form-input 
                                            type='password' 
                                            v-model='newsiteaccount.pass2' 
                                            @keyup="siteaccount_check_newpassword()" 
                                            :state='newsiteaccount.validators.pass2' 
                                            autocomplete='off'></b-form-input>
                                    </b-col>
                                    <b-col> </b-col>
                                </b-row>
                                <b-row>
                                    <b-col>
                                        <b-button 
                                            variant='primary' 
                                            :disabled='!(newsiteaccount.validators.username && newsiteaccount.validators.pass1 && newsiteaccount.validators.pass2)'
                                            @click='siteaccount_create'
                                            >Add</b-button>
                                    </b-col>
                                </b-row>
                            </b-container>
                            </b-card>
                        </b-collapse>
                        <br>
                        <b-container class='border-top' no-body v-for='a in siteaccounts'>
                            <b-row class='mt-3 mb-3' v-b-toggle="'collapse-siteaccount-'+a.id">
                                <a href='#' onclick='return false;' class='when-opened'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-down'></i>
                                    @{{a.username}}<i class='fas fa-globe'></i>
                                </a>
                                <a href='#' onclick='return false;' class='when-closed'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-down'></i>
                                    @{{a.username}} <i class='fas fa-globe'></i>  
                                </a>
                            </b-row>
                            <b-collapse :accordion="'siteaccounts'" :id="'collapse-siteaccount-'+a.id">
                            <b-row class='mt-3'>
                                <b-container>
                                    <b-row>
                                        <b-col>Username</b-col>
                                        <b-col>
                                            <b-form-input 
                                                v-model='a.newusername' 
                                                :disabled='!a.changeusername' 
                                                :state='a.validators.username' 
                                                @change='siteaccount_check_username(a)' 
                                                @keyup='siteaccount_check_username(a)' 
                                                type='text'></b-form-input>
                                        </b-col>
                                    </b-row>
                                    <b-row><b-col>&nbsp;</b-col></b-row>
                                    <b-row>
                                        <b-col>Options</b-col>
                                        <b-col>
                                            <b-form-checkbox v-model='a.enabled'>Enabled</b-form-checkbox>
                                            <b-form-checkbox v-model='a.sendonly'>Send only</b-form-checkbox>
                                        </b-col>
                                        <b-col></b-col>
                                    </b-row>
                                    <b-row><b-col>&nbsp;</b-col></b-row>
                                    <b-row>
                                        <b-col>Quota</b-col>
                                        <b-col>
                                            <b-form-input type='number' v-model='a.quota'>Quota</b-form-input>
                                        </b-col>
                                        <b-col> MB</b-col>
                                    </b-row>
                                    <b-row><b-col>&nbsp;</b-col></b-row>
                                    <b-row>
                                        <b-col>New password (optional)</b-col>
                                        <b-col>
                                            <b-form-input 
                                                type='password' 
                                                v-model='a.pass1' 
                                                @keyup="siteaccount_check_password(a)" 
                                                @change="siteaccount_check_password(a)" 
                                                :state='a.validators.pass1' 
                                                autocomplete='off'></b-form-input>
                                        </b-col>
                                        <b-col> </b-col>
                                    </b-row>
                                    <b-row>
                                        <b-col>Confirm password</b-col>
                                        <b-col>
                                            <b-form-input 
                                                type='password' 
                                                v-model='a.pass2' 
                                                @keyup="siteaccount_check_password(a)" 
                                                @change="siteaccount_check_password(a)"  
                                                :state='a.validators.pass2' 
                                                autocomplete='off'></b-form-input>
                                        </b-col>
                                        <b-col> </b-col>
                                    </b-row>
                                    <b-row>
                                        <b-col>
                                            <b-button 
                                                variant='primary' 
                                                :disabled='!((a.validators.username !== false) && (a.validators.pass1 !== false) && (a.validators.pass2 !== false))' 
                                                @click='siteaccount_update(a,$event)'>Save</b-button>
                                        </b-col>
                                        <b-col></b-col>
                                        <b-col>
                                        <b-button 
                                                variant='danger' 
                                                v-b-modal="'delete-acc-modal-'+a.id"><i class='fas fa-trash'></i></b-button>
                                        </b-col>

                                    </b-row>
                                </b-container>
                            </b-row>
                            </b-collapse>
                            <b-modal 
                                :id="'delete-acc-modal-'+a.id"
                                title="Confirm Delete"
                                @ok="siteaccount_delete_(a,$event)"

                                >Are you sure you want to delete the account <strong>@{{a.username}}@@{{a.domain}}</strong>?
                                <template v-slot:modal-footer="{ ok, cancel, hide }">
                                    <b-button @click='cancel()'>Cancel</b-button>
                                    <b-button variant='danger' @click='ok()'>Delete</b-button>
                                </template>
                            </b-modal>
                        </b-container>                       
                    </b-tab>                    
                    <b-tab title="TLS Policies" v-if='isSiteAdmin' @click='tls_list'>
                        <div>
                            <b-button class='w-100' variant='primary' v-b-toggle="'collapse-tlspolicy-new'"><i class="fas fa-plus"></i>Add TLS policy</b-button>
                        </div>
                        <b-collapse :accordion="'tlspolicies'" :id="'collapse-tlspolicy-new'">
                            <b-card>
                                <b-container>
                                    <b-row class='mt-1'>
                                        <b-col cols='5'>Domain</b-col>
                                        <b-col cols='7'>
                                            <b-form-input v-model="newtls.domain" ></b-form-input>
                                        </b-col>
                                    </b-row>
                                    <b-row class='mt-3'>
                                        <b-col cols='5'>TLS Policy</b-col>
                                        <b-col cols='7'>
                                            <b-form-select v-model='newtls.policy' >
                                                <b-form-select-option value='none' default>None</b-form-select-option>
                                                <b-form-select-option value='may'>May</b-form-select-option>
                                                <b-form-select-option value='encrypt'>Encrypt</b-form-select-option>
                                                <b-form-select-option value='dane'>Dane</b-form-select-option>
                                                <b-form-select-option value='dane-only'>Dane-Only</b-form-select-option>
                                                <b-form-select-option value='fingerprint'>Fingerprint</b-form-select-option>
                                                <b-form-select-option value='verify'>Verify</b-form-select-option>
                                                <b-form-select-option value='secure'>Secure</b-form-select-option>
                                            </b-form-select>
                                        </b-col>
                                    </b-row>
                                    <b-row class='mt-3'>
                                        <b-col cols='5'>Optional parameters</b-col>
                                        <b-col cols='7'>
                                            <b-form-input v-model="newtls.params" placeholder="Enter parameters here"></b-form-input>
                                            </b-col>
                                    </b-row>
                                    <b-row class='mt-3'>
                                        <b-col cols='5'></b-col>
                                        <b-col cols='7'>
                                            <b-button variant='primary' ref='bt_tls_save' @click='tls_add($event)' ><i class='fas fa-plus'></i></b-button>
                                        </b-col>
                                    </b-row>
                                </b-container>
                            </b-card>
                        </b-collapse>
                        <b-container v-for='t in tlspolicies'  class='border-top'>
                            <b-row class='mt-3 mb-3' v-b-toggle="'collapse-tlspolicy-'+t.id">
                                <a href='#' onclick='return false;' class='when-opened'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-down'></i>
                                    @{{t.domain}}
                                </a>
                                <a href='#' onclick='return false;' class='when-closed'>
                                    <i style='vertical-align: middle; font-size: 125%;' class='fas fa-caret-right'></i>
                                    @{{t.domain}}
                                </a>
                            </b-row>
                            <b-collapse :accordion="'tlspolicies'" :id="'collapse-tlspolicy-'+t.id">
                            <b-row class='mt-3'>
                                <b-container>
                                    <b-row class='mt-3'>
                                        <b-col cols='3'>Policy</b-col>
                                        <b-col cols='6'>Parameters</b-col>
                                        <b-col cols='3'></b-col>
                                    </b-row>
                                    <b-row class='mt-3'>
                                        <b-col cols='3'>
                                            <b-form-select v-model='t.policy' @change='t.changed.policy = true' >
                                                <b-form-select-option value='none' default>None</b-form-select-option>
                                                <b-form-select-option value='may'>May</b-form-select-option>
                                                <b-form-select-option value='encrypt'>Encrypt</b-form-select-option>
                                                <b-form-select-option value='dane'>Dane</b-form-select-option>
                                                <b-form-select-option value='dane-only'>Dane-Only</b-form-select-option>
                                                <b-form-select-option value='fingerprint'>Fingerprint</b-form-select-option>
                                                <b-form-select-option value='verify'>Verify</b-form-select-option>
                                                <b-form-select-option value='secure'>Secure</b-form-select-option>
                                            </b-form-select>
                                        </b-col>
                                        <b-col cols='6'>
                                            <b-form-input v-model="t.params"  @change='t.changed.params = true' placeholder="Enter parameters here"></b-form-input>
                                        </b-col>
                                        <b-col cols='3'>
                                            <b-button variant='primary' :disabled='!(t.changed.policy || t.changed.params)' @click='tls_set(t,$event)' ><i class='fas fa-save'></i></b-button>
                                            <b-button variant='danger' v-b-modal="'delete-tlspolicy-'+t.id" ><i class='fas fa-trash'></i></b-button>
                                        </b-col>
                                    </b-row>
                                    <b-row class='mt-3'>
                                        <b-col cols='5'></b-col>
                                        <b-modal 
                                            :id="'delete-tlspolicy-'+t.id"
                                            title="Confirm Delete"
                                            @ok="tls_del(t,$event)"
                                            >Are you sure you want to delete TLS  policy for <strong>@{{t.domain}}</strong>?
                                            <template v-slot:modal-footer="{ ok, cancel, hide }">
                                                <b-button @click='cancel()'>Cancel</b-button>
                                                <b-button variant='danger' @click='ok()'>Delete</b-button>
                                            </template>
                                        </b-modal>

                                    </b-row>
                                </b-container>
                            </b-row>
                        </b-container>
                    </b-tab>
                </b-tabs>
            </b-card>
        </b-col>
    </b-row>
</b-container>
</div>
@endsection