<div ng-controller="SettingsController" class="user" data-ng-init="onInit()">

    <div id="wrapper">

        <div id="genericHeading">
            <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
        </div>

        <div class="feedback">{{ feedback }}</div>
        <h1>Settings</h1>
        <tabset>
            <tab heading="My Profile">

                <h2>Profile information</h2>
                <div class="settingsgroup">
                    <form>
                        <label>Profile photo</label>
                        <div class="profile-avatar">
                            <img ng-src="{{ (null !== profile.avatarUrl) ? httpUri(profile.avatarUrl, 320, 320) : 'img/default-profile.png' }}" m-file-input="profile.avatarFile"/>
                        </div>
                        <label for="user-displayname-input">Display name</label>
                        <div>
                            <input id="user-displayname-input" size="40" ng-model="profile.displayName" placeholder="Your display name"/>
                            <br/>
                            <br/>
                        </div>
                    </form>
                </div>

                <button id="user-save-button"
                        ng-disabled="(profile.displayName === profileOnServer.displayName) && (profile.avatarUrl === profileOnServer.avatarUrl)"
                        ng-click="saveProfile()">Update profile</button>
                
                <h2>Identity management</h2>

                <div class="section settingsgroup">
                    <form>
                        <input size="40" ng-model="linkedEmails.linkNewEmail" ng-enter="linkEmail(linkedEmails.linkNewEmail)" /><br />
                        <input ng-model="linkedEmails.bindNewEmail" type="checkbox" />
                        <div id="bind_email_label">Use this account when people search for my email address on Matrix</div><br />
                        <button ng-disabled="!linkedEmails.linkNewEmail" ng-click="linkEmail(linkedEmails.linkNewEmail)">
                            Link Email
                        </button>
                        {{ emailFeedback }}
                    </form>
                    <form ng-hide="!linkedEmails.emailBeingAuthed">
                        An email has been sent to {{ linkedEmails.emailBeingAuthed }}.
                        <br />
                        <button ng-disabled="!linkedEmails.linkNewEmail" ng-click="submitEmailVerify()">
                            I have verified my address: continue
                        </button>   
                    </form>
                    <img src="img/spinner.gif" ng-show="linkedEmails.fetchingEmailList" />
                    <table>
                        <tr ng-repeat="threepid in linkedEmails.linkedEmailList">
                            <td>{{threepid.address}}</td>
                        </tr>
                    </table>
                </div>
            </tab>
            <tab heading="Notifications">
                <h2>Notification Settings</h2>
                <div class="section pushmaster" ng-class="{pushdisabled: settings.push_master_rule.enabled}" ng-show="settings.push_master_rule != undefined">
                    <button ng-click="settings.push_master_rule.enabled = !settings.push_master_rule.enabled; updateRuleEnabled(settings.push_master_rule)" style="font-size: 12pt">{{settings.push_master_rule.enabled ? 'Enable notifications' : 'Disable all notifications'}}</button>                    
                    <img src="img/spinner.gif" ng-class="{invisible: !settings.push_master_rule.inprogress}" />
                    <div ng-if="settings.push_master_rule.enabled">
                        <p>All notifications are currently disabled for all devices.</p>
                    </div>
                </div>
                <div class="section pushsection" ng-class="{pushdisabled: settings.push_master_rule.enabled}">
                    <div ng-switch="settings.notifications" class="settingsgroup">
                        <h3>Local Desktop Notifications</h3>
                        <div ng-switch-when="granted">
                            <div>
                                <div ng-if="!config.muteNotifications">
                                    <p>Desktop notifications are enabled: notifications will be displayed when this website tab is open and in the background.</p>
                                </div>
                                <div ng-if="config.muteNotifications">
                                    <p>Desktop notifications are muted: notifications will not be displayed from this website</p>
                                </div>
                                <p>
                                    <button ng-click="toggleMute()" style="font-size: 12pt">
                                        {{config.muteNotifications ? "Unmute desktop notifications" : "Mute desktop notifications"}}
                                    </button>
                                </p>
                            </div>
                            <div ng-hide="config.muteNotifications">
                                <label><input type="checkbox" ng-change="updateAudioNotification()" ng-model="settings.audioNotifications">Enable audio desktop notifications</label>
                            </div>
                        </div>
                        <div ng-switch-when="denied">
                            <p>You have denied permission for notifications.</p>
                            <p>To enable it, reset the notification setting for this web site in your browser settings.</p>
                        </div>
                        <div ng-switch-when="default">
                            <p>This will enabled notifications from this web client to your desktop.</p>
                            <button ng-click="requestNotifications()" style="font-size: 14pt">Enable desktop notifications</button>
                        </div>
                        <div ng-switch-default="">
                            <p>Sorry, your browser does not support notifications.</p>
                        </div>
                    </div>
                
                    <div class="settingsgroup">
                        <h3>Global Notification Settings</h3>
                        <p>
                            Notification settings are saved to your user account and are shared between all clients which support them (including desktop notifications).
                        </p>
                        <p>
                            Rules are applied in order; the first rule which matches defines the outcome for the message.<br/>
                            So: Per-word notifications are more important than per-room notifications which are more important than per-sender notifications.<br/>
                            For multiple rules of the same kind, the first one in the list that matches takes priority.<br/>
                        </p>
                        <h4>Per-word notifications</h4>
                        <div class="section">
                            <p>
                                Words match case insensitively, and may include a *
                                wildcard. So:<br/>
                                <b>foo</b> matches the string <i>foo</i>
                                surrounded by word delimiters (e.g. punctuation and
                                whitespace or start/end of line).<br/>
                                <b>foo*</b> matches any
                                such word that begins <i>foo</i>.<br/>
                                <b>*foo*</b> matches any
                                such word which includes the 3 letters <i>foo</i>.
                            </p>
                            <table>
                                <tr ng-repeat="rule in settings.rules.content" ng-if="rule.rule_id[0] != '.'" ng-class="{disabledRule : !rule.enabled}">
                                    <td>
                                        <img width="16" height="16" ng-click="rule.enabled = !rule.enabled; updateRuleEnabled(rule)"
                                            ng-src="{{rule.enabled ? 'img/pause.png' : 'img/play.png'}}" alt="{{rule.enabled ? 'Disable' : 'Enable'}}"/>
                                        <img width="16" height="16" ng-click="deleteContentRule(rule)" ng-disabled="rule.inprogress"
                                            src="img/delete.png" alt="Delete"/>
                                        {{rule.pattern}}
                                    </td>
                                    <td>
                                        <span ng-repeat="a in rule.actions"><i>{{stringForAction(a)}}{{$last ? '' : ', '}}</i> </span>
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" placeholder="word to match" ng-model="rule_add.input.content" />
                                    </td>
                                    <td>
                                        <select ng-model="rule_add.action.content" ng-change="rule_add.sound.content = false; rule_add.highlight.content = false;">
                                            <option value="notify">Always Notify</option>
                                            <option value="dont_notify">Never Notify</option>
                                        </select>
                                    Sound: <input type="checkbox" ng-model="rule_add.sound.content" ng-disabled="rule_add.action.content != 'notify'" />
                                    Highlight: <input type="checkbox" ng-model="rule_add.highlight.content" ng-disabled="rule_add.action.content != 'notify'" />
                                    <input type="submit" ng-click="addContentRule();" value="Add" ng-disabled="!rule_add.input.content || rule_add.inprogress.content" />
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <h4>Per-room notifications</h4>
                        <div class="section">
                            <table>
                                <tr ng-repeat="rule in settings.rules.room" ng-if="rule.rule_id[0] != '.'" ng-class="{disabledRule : !rule.enabled}">
                                    <td>
                                        <img width="16" height="16" ng-click="rule.enabled = !rule.enabled; updateRuleEnabled(rule)"
                                            ng-src="{{rule.enabled ? 'img/pause.png' : 'img/play.png'}}" alt="{{rule.enabled ? 'Disable' : 'Enable'}}"/>
                                        <img width="16" height="16" ng-click="deleteRoomRule(rule)" ng-disabled="rule.inprogress"
                                            src="img/delete.png" alt="Delete"/>
                                    Room: '{{rooms[rule.rule_id].room_id | mRoomName}}'
                                    </td>
                                    <td>
                                        <span ng-repeat="a in rule.actions"><i>{{stringForAction(a)}}{{$last ? '' : ', '}}</i> </span>
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <select ng-model="rule_add.input.room">
                                            <option ng-repeat="(room_id, room) in rooms" value="{{room_id}}">{{room.room_id | mRoomName}} (Room)</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select ng-model="rule_add.action.room" ng-change="rule_add.sound.room = false; rule_add.highlight.room = false;">
                                            <option value="notify">Always Notify</option>
                                            <option value="dont_notify">Never Notify</option>
                                        </select>
                                        Sound: <input type="checkbox" ng-model="rule_add.sound.room" ng-disabled="rule_add.action.room != 'notify'" />
                                        Highlight: <input type="checkbox" ng-model="rule_add.highlight.room" ng-disabled="rule_add.action.room != 'notify'" />
                                        <input type="submit" ng-click="addRoomRule()" value="Add" ng-disabled="!rule_add.input.room || rule_add.inprogress.room" />
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <h4>Per-sender notifications</h4>
                        <div class="section">
                            <table>
                                <tr ng-repeat="rule in settings.rules.sender" ng-if="rule.rule_id[0] != '.'" ng-class="{disabledRule : !rule.enabled}">
                                    <td>    
                                        <img width="16" height="16" ng-click="rule.enabled = !rule.enabled; updateRuleEnabled(rule)"
                                            ng-src="{{rule.enabled ? 'img/pause.png' : 'img/play.png'}}" alt="{{rule.enabled ? 'Disable' : 'Enable'}}"/>
                                        <img width="16" height="16" ng-click="deleteSenderRule(rule)" ng-disabled="rule.inprogress"
                                            src="img/delete.png" alt="Delete"/>
                                        {{rule.rule_id}}
                                    </td>
                                    <td>
                                        <span ng-repeat="a in rule.actions"><i>{{stringForAction(a)}}{{$last ? '' : ', '}}</i> </span>
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" placeholder="@user:domain.com" ng-model="rule_add.input.sender" />
                                    </td>
                                    <td>
                                        <select ng-model="rule_add.action.sender" ng-change="rule_add.sound.sender = false; rule_add.highlight.sender = false;">
                                            <option value="notify">Always Notify</option>
                                            <option value="dont_notify">Never Notify</option>
                                        </select>
                                        Sound: <input type="checkbox" ng-model="rule_add.sound.sender" ng-disabled="rule_add.action.sender != 'notify'" />
                                        Highlight: <input type="checkbox" ng-model="rule_add.highlight.sender" ng-disabled="rule_add.action.sender != 'notify'" />
                                        <input type="submit" ng-click="addSenderRule();" value="Add" ng-disabled="!rule_add.input.sender || rule_add.inprogress.sender" />
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <h4>Other Alerts</h4>
                        <div class="section">
                            <table>
                                <tr ng-repeat="rule in settings.default_rules.additional"
                                    ng-class="{disabledRule : !rule.enabled}">
                                    <td>
                                        <img width="16" height="16" ng-click="rule.enabled = !rule.enabled; updateRuleEnabled(rule)"
                                            ng-src="{{rule.enabled ? 'img/pause.png' : 'img/play.png'}}" alt="{{rule.enabled ? 'Disable' : 'Enable'}}"/>
                                        &nbsp;&nbsp;
                                        {{rule.description}}
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                                <tr ng-repeat="rule in settings.default_rules.call"
                                    ng-class="{disabledRule : !rule.enabled}">
                                    <td>
                                        <img width="16" height="16" ng-click="rule.enabled = !rule.enabled; updateRuleEnabled(rule)"
                                            ng-src="{{rule.enabled ? 'img/pause.png' : 'img/play.png'}}" alt="{{rule.enabled ? 'Disable' : 'Enable'}}"/>
                                        &nbsp;&nbsp;
                                        {{rule.description}}
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                                <tr ng-repeat="rule in settings.default_rules.suppression"
                                    ng-class="{disabledRule : !rule.enabled}">
                                    <td>
                                        <img width="16" height="16" ng-click="rule.enabled = !rule.enabled; updateRuleEnabled(rule)"
                                            ng-src="{{rule.enabled ? 'img/pause.png' : 'img/play.png'}}" alt="{{rule.enabled ? 'Disable' : 'Enable'}}"/>
                                        &nbsp;&nbsp;
                                        {{rule.description}}
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <h4>By default...</h4>
                        <div class="section">
                            <table>
                                <tr ng-repeat="rule in settings.default_rules.fallthrough" ng-class="{disabledRule : !rule.enabled}">
                                    <td>
                                        <img width="16" height="16" ng-click="rule.enabled = !rule.enabled; updateRuleEnabled(rule)"
                                            ng-src="{{rule.enabled ? 'img/pause.png' : 'img/play.png'}}" alt="{{rule.enabled ? 'Disable' : 'Enable'}}"/>
                                        &nbsp;&nbsp;
                                        {{rule.description}}
                                    </td>
                                    <td>
                                        <img src="img/spinner.gif" ng-class="{invisible: !rule.inprogress}" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </tab>
            <tab heading="SMS">
                <div class="section settingsgroup" ng-show="payment.url">
                    <!--
                    <p>
                        If you want to send and receive SMS via Matrix using OpenMarket by messaging Matrix IDs resembling <code>@+447700900123:matrix.openmarket.com</code>, you require credit on your OpenMarket Matrix Gateway account.
                    </p> 
                    <p>
                        You currently have {{payment.credit}} of credit available.
                    </p>
                    <p>
                        <button ng-click='getCredit()'>Add Credit</button>
                    </p>
                    -->
                    <p>It is possible to send and receive SMS via Matrix using the <a href="http://www.openmarket.com/matrix">OpenMarket Matrix Gateway</a> by messaging Matrix IDs resembling <code>@+447700900123:matrix.openmarket.com</code>.  During beta testing, messages incur no cost (with a per-user fair usage limit), but you must link your account to PayPal as a security measure.</p>
                    <p>
                        <button ng-click='getCredit()'>Link PayPal account</button>
                    </p>
                </div>
            </tab>
            <tab heading="Password">
                <div class="section settingsgroup">
                    <h2>Change Password</h2>
                    <p>When changing your password you will be logged out of all other devices and stop receiving push notifications until you log in again.</p>
                    <form ng-submit="changePassword()">
                        <table>
                            <tr><td>Current password: </td><td><input type="password" ng-model="password.oldpw" ng-class="{error: password.badfields.indexOf('oldpw') > -1}" /></td></tr>
                            <tr><td>New password: </td><td><input type="password" ng-model="password.newpw" ng-class="{error: password.badfields.indexOf('newpw') > -1}" /></td></tr>
                            <tr><td>Confirm new password: </td><td><input type="password" ng-model="password.confirmnewpw" ng-class="{error: password.badfields.indexOf('confirmnewpw') > -1}" /></td></tr>
                            <tr><td><input type="submit" value="Change Password" ng-disabled="password.inprogress || !passwordValid()" /></td></tr>
                        </table>
                        <span ng-class="{feedbackError: password.state == 'error'}">{{password.feedback}}<span>
                    </form>
                    <div ng-show="password.state == 'changed'" class="reminder">
                        Remember: you will not receive push notifications on other devices until you log back in to them.
                    </div>
                </div>
            </tab>
            <tab heading="Information">
                <div class="section settingsgroup">
                    <p>
                        <div>Web client version: {{ appVersion }} </div>
                        <div>Home server: {{ config.homeserver }} </div>
                        <div>Identity server: {{ config.identityServer }} </div>
                        <div>User ID: {{ config.user_id }} </div>
                        <div>Access token: {{ config.access_token }} </div>
                    </p>
                </div>
            </tab>
            <tab heading="Help">
                <div class="section settingsgroup">
                    <p>
                        The following commands are available in the room chat:
                        <ul>
                            <li>/nick &lt;display_name&gt;: change your display name</li>
                            <li>/me &lt;action&gt;: send the action you are doing. /me will be replaced by your display name</li>
                            <li>/join &lt;room_alias&gt;: join a room</li>
                            <li>/kick &lt;user_id&gt; [&lt;reason&gt;]: kick the user</li>
                            <li>/ban &lt;user_id&gt; [&lt;reason&gt;]: ban the user</li>
                            <li>/unban &lt;user_id&gt;: unban the user</li>
                            <li>/op &lt;user_id&gt; &lt;power_level&gt;: set user power level</li>
                            <li>/deop &lt;user_id&gt;: reset user power level to the room default value</li>
                        </ul>
                    </p>
                </div>
            </tab>
        <tabset>
    </div>    
</div>
