<md-dialog ng-controller="members" ng-class="{'full-screen': !(sharesType === 'adminBoard' && initializingAuthority && !keystoreOK)}">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2 class="flex"><span translate>Constitute board</span> {{selectedAuthority.alias}}</h2>
            <div>
                <md-button ng-if="!twoStepsClosing" class="md-icon-button" ng-click="cancel()" aria-label="{{'Close dialog' | translate}}">
                    <md-icon md-svg-src="assets/icons/ic_close_24px.svg"></md-icon>
                </md-button>
                <div class="constitute-manager-close-question" ng-if="twoStepsClosing">
                    <span translate>Confirm close?</span>
                    <md-button class="md-icon-button" ng-click="cancel()" aria-label="{{'Close dialog' | translate}}">
                        <span translate>Yes</span>
                    </md-button> 
                    <md-button class="md-icon-button" ng-click="discard()" aria-label="{{'Close dialog' | translate}}">
                        <span translate>No</span>
                    </md-button>
                </div>
                <div class="constitute-manager-close" ng-if="twoStepsClosing">
                    <span translate>Please note that if you cancel the Constitution process at this stage you will need to start it again from scratch. You may not be able to reuse any of the cards that you used so far. </span>
                </div>
            </div>
        </div>
    </md-toolbar>
    <md-dialog-content class="md-dialog-content" role="document" tabindex="-1">
        <div class="md-dialog-content-body">

            <!-- STEP 1: load certification -->
            <div ng-show="sharesType === 'adminBoard' && initializingAuthority && !keystoreOK">
                <p class="alert alert-error" ng-if="errorInKeystore">
                    <md-icon md-svg-src="assets/icons/ic_error_24px.svg"></md-icon>
                    <span translate>The file or password is not correct. Try again.</span>
                </p>
                <ol>
                    <li>
                        <p translate>In order to start the constitution, upload the certificate, a file .SKS provided for this Admin Board</p>
                        <input class="ng-hide" id="input-file-id" multiple type="file" onchange="angular.element(this).scope().filesChanged(this)"/>
                        <label for="input-file-id" tabindex="0" class="md-button md-raised md-primary" translate>Choose File</label>
                        <p class="md-caption">{{selectedFile}}</p>
                    </li>
                    <li ng-show="files">
                        <p translate>Enter now your password</p>
                        <md-input-container class="mbn">
                            <label translate>Password</label>
                            <input type="password" ng-model="password">
                        </md-input-container>
                        <div>
                            <md-button id="select" class="md-raised md-primary mhn mbm" ng-click="confirmSelection()" ng-show="files" ng-disabled="noFileAndPasswordSelected()">
                                <span translate>OK</span>
                            </md-button>
                        </div>
                    </li>
                </ol>
            </div>

            <!-- STEP 2: constitute (full-screen layout) -->
            <div class="constitute-manager-wrapper" ng-hide="sharesType === 'adminBoard' && initializingAuthority && !keystoreOK">
                <div>
                    <p>{{constituteMembersDescription()}}</p>
                    <hr>
                </div>
                <div class="constitute-manager">
                    <div class="constitute-manager-members">
                        <md-list>
                            <md-list-item ng-repeat="member in listOfMembers track by $index">
                                <md-button  id="memberButton_{{$index}}" ng-click="select(member);" ng-disabled="selectedMember === member || initializingAuthority || members2DoneStatus[member]" ng-class="{'is-current': selectedMember === member && !members2DoneStatus[member], 'is-done': members2DoneStatus[member]}">
                                    <md-icon class="icon-idle" md-svg-src="assets/icons/ic_person_24px.svg" aria-label="{{'Member' | translate}}"></md-icon>
                                    <md-icon class="icon-current" md-svg-src="assets/icons/ic_arrow_forward_24px.svg" aria-label="{{'Current' | translate}}"></md-icon>
                                    <md-icon class="icon-done" md-svg-src="assets/icons/ic_done_24px.svg" aria-label="{{'Done' | translate}}"></md-icon>
                                    {{member}}
                                </md-button>
                            </md-list-item>
                        </md-list>
                    </div>
                    <div class="constitute-manager-card">
                        <!--
                            states: isNotReady, isDone
                            steps: introduceCard, reading, introducePIN, writing, extractCard
                        -->
                        <div class="constitute-manager-member" ng-if="initializingAuthority">
                            <div>
                                <h3 class="md-title text-center">
                                    <md-icon md-svg-src="assets/icons/ic_spinner_24px.svg" class="spin" aria-label="{{'Reading...' | translate}}"></md-icon>
                                    <span translate>Starting the constitution...</span>
                                </h3>
                            </div>
                        </div>
                        <div class="constitute-manager-member" ng-show="!initializingAuthority && initiallySelected">
                            <h3 class="constitute-manager-member-title md-display-1">{{selectedMember}}</h3>
                            <div class="constitute-manager-member-interaction">
                                <div ng-if="wizardStep === 'introduceCard'">
                                    <p class="md-title text-center" translate>Introduce your card into the smartcard reader</p>
                                    <md-icon md-svg-src="assets/icons/ic_card_insert.svg" class="card-icon" aria-label="{{'Introduce your card' | translate}}"></md-icon>
                                </div>
                                <div ng-if="wizardStep === 'reading'">
                                    <p class="md-title text-center">
                                        <md-icon md-svg-src="assets/icons/ic_spinner_24px.svg" class="spin" aria-label="{{'Reading...' | translate}}"></md-icon>
                                        <span translate>Reading...</span>
                                    </p>
                                </div>
                                <div ng-show="wizardStep === 'introducePIN'">
                                    <div>
                                        <md-input-container>
                                            <label translate>Choose a password</label>
                                            <input id="pin1" type="password" ng-model="pin.value" ng-keypress="pin1_keypress($event)">
                                        </md-input-container>
                                    </div>
                                    <div>
                                        <md-input-container>
                                            <label translate>Confirm password</label>
                                            <input id="pin2"  type="password" ng-model="confirmPin.value" ng-keypress="pin2_keypress($event)">
                                        </md-input-container>
                                    </div>
                                    <div>
                                        <md-button class="md-primary md-raised" ng-click="validatePin()">
                                            <span translate>Ok</span>
                                        </md-button>
                                    </div>
                                </div>
                                <div ng-if="wizardStep === 'writing'">
                                    <p class="md-title text-center">
                                        <md-icon md-svg-src="assets/icons/ic_spinner_24px.svg" class="spin" aria-label="{{'Reading...' | translate}}"></md-icon>
                                        <span translate>Recording...</span>
                                    </p>
                                </div>
                                <div ng-if="wizardStep === 'extractCard'">
                                    <p class="alert alert-success">
                                        <md-icon md-svg-src="assets/icons/ic_done_24px.svg"></md-icon>
                                        <span translate>Smartcard recorded</span>
                                    </p>
                                    <p class="md-title text-center" translate>Extract your card</p>
                                    <md-icon md-svg-src="assets/icons/ic_card_extract.svg" class="card-icon" aria-label="{{'Extract your card' | translate}}"></md-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </md-dialog-content>
</md-dialog>
