<md-dialog aria-label="Settings" md-theme="{{ ctrl.theme }}">
    <form ng-cloak>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2 translate>settings.SETTINGS</h2>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="ctrl.cancel()">
                    <md-icon aria-label="Close dialog" class="material-icons md-24">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content>
            <div class="md-dialog-content">
                <section>
                    <md-subheader class="md-accent"><span translate>settings.notifications.NOTIFICATIONS</span>
                    </md-subheader>
                    <md-list flex>
                        <md-list-item ng-if="ctrl.notificationApiAvailable && ctrl.notificationPermission !== false">
                            <md-checkbox
                                    ng-disabled="!ctrl.notificationApiAvailable || ctrl.notificationPermission === false"
                                    ng-model="ctrl.desktopNotifications"
                                    ng-change="ctrl.setWantsNotifications(ctrl.desktopNotifications)"
                                    aria-label="Show desktop notifications">
                                <span translate>settings.notifications.SHOW_NOTIFICATIONS</span>
                            </md-checkbox>
                        </md-list-item>
                        <md-list-item ng-if="ctrl.desktopNotifications && ctrl.notificationApiAvailable && ctrl.notificationPermission !== false">
                            <md-checkbox
                                    ng-disabled="!ctrl.desktopNotifications"
                                    ng-model="ctrl.notificationPreview"
                                    ng-change="ctrl.setWantsPreview(ctrl.notificationPreview)"
                                    aria-label="Show message preview">
                                <span translate>settings.notifications.SHOW_PREVIEW</span>
                            </md-checkbox>
                        </md-list-item>
                        <md-list-item>
                            <md-checkbox
                                    ng-model="ctrl.notificationSound"
                                    ng-change="ctrl.setWantsSound(ctrl.notificationSound)"
                                    aria-label="Play notification sound">
                                <span translate>settings.notifications.PLAY_SOUND</span>
                            </md-checkbox>
                        </md-list-item>
                    </md-list>
                    <div ng-if="!ctrl.notificationApiAvailable" class="status status-no">
                        <i class="material-icons md-24">error</i>
                        <span translate>error.NOTIFICATION_API_NOT_AVAILABLE</span>
                    </div>
                    <div ng-if="ctrl.notificationPermission === false && ctrl.notificationApiAvailable" class="status status-no">
                        <i class="material-icons md-24">error</i> <span translate>error.NOTIFICATION_PERMISSION_DENIED</span>
                        <a href="https://threema.com/de/faq/web_notifications"
                           target="_blank" rel="noopener noreferrer">
                            <p translate>error.NOTIFICATION_PERMISSION_DENIED_LEARN_MORE</p>
                        </a>
                    </div>
                </section>
                <section>
                    <md-subheader class="md-accent"><span translate>settings.composearea.COMPOSE_AREA</span>
                    </md-subheader>
                    <md-list flex>
                        <md-list-item>
                            <md-radio-group ng-model="ctrl.submitKey" ng-change="ctrl.setSubmitKey(ctrl.submitKey)">
                                <md-radio-button value="0" class="md-primary">
                                    <span translate>settings.composearea.SUBMIT_KEY_ENTER</span>
                                </md-radio-button>
                                <md-radio-button value="1" class="md-primary">
                                    <span translate>settings.composearea.SUBMIT_KEY_CTRL_ENTER</span>
                                </md-radio-button>
                            </md-radio-group>
                        </md-list-item>
                    </md-list>
                </section>
                <section>
                    <md-subheader class="md-accent"><span translate>settings.ui.UI</span>
                    </md-subheader>
                    <md-list flex>
                        <md-list-item>
                            <md-radio-group ng-model="ctrl.userInterface" ng-change="ctrl.setUserInterface(ctrl.userInterface)">
                                <md-radio-button value="default" class="md-primary">
                                    <span translate>settings.ui.DEFAULT</span>
                                </md-radio-button>
                                <md-radio-button value="minimal" class="md-primary">
                                    <span translate>settings.ui.MINIMAL</span>
                                </md-radio-button>
                            </md-radio-group>
                        </md-list-item>
                    </md-list>
                </section>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <span flex></span>
            <md-button ng-click="ctrl.cancel()">
                <span translate>common.OK</span>
            </md-button>
        </md-dialog-actions>
    </form>
</md-dialog>

