<div>
    <div id="configs-title-bar">
        <div id="configs-nav-head">
            <div id="configs-nav-title">{{page-title}}</div>
        </div>

        <div class="nav-search">
            <i class="fa fa-search"></i>
            <input type="search" id="search-box" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly'); this.blur(); this.focus();}">
        </div>

        <div id="configs-title-container" class="scrollable">
            <div class="config-container title" style="height:30px">
                <div class="name" data-localize="configs.core">Core</div>
            </div>
            {{#each navTitles.coreTitles}}
                <div id="nav-item-{{this.key}}" class="config-container">
                    <div class="name" data-localize="{{this.label}}">{{this.label}}</div>
                </div>
            {{/each}}

            <div class="config-container title" style="height:30px">
                <div class="name" data-localize="configs.plugins">Plugins</div>
            </div>
            {{#each navTitles.pluginTitles}}
                <div id="nav-item-{{this.key}}" class="config-container">
                        <div class="name" data-localize="{{this.label}}">{{this.label}}</div>
                </div>
            {{/each}}
        </div>
    </div>

    <div id="configs-table-widget">
        <div class="widget" id="sticky-config-header">
            <div class="widget-header">
                <div class="left">
                    <div id="config-title" class="title" style="padding-left:9px">{{selectedNav.label}}</div>
                </div>
                <div class="right btn-header">
                    <div class="icon-button green" id="configs-apply-changes" data-localize="plugins.apply"></div>
                </div>
            </div>
        </div>
        <div id="config-table-container" class="configs title-rows-hidden" data-help-localize="help.{{{chart-helper}}}">
            <table class="d-table help-zone-vb no-fix account-settings" cellpadding="0" cellspacing="0">
                {{#if user}}
                <tr>
                    <td data-localize="configs.account-settings"></td>
                    <td>
                        {{#if reset}}
                        <h3 data-localize='user-settings.force-password-reset' style='text-align: center;'></h3>
                        {{/if}}
                        <table class="d-table help-zone-vb " cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <div class="title" data-localize="user-settings.profile-picture"></div>
                                </td>
                                <td style="position:relative">
                                    <div class="pp-circle">
                                        <input type="file" id="pp-uploader" name="member_image">
                                        <input type="hidden" id="member-image-path" name="member-image-path">
                                    </div>
                                    <div class="pp-menu-trigger">
                                        <div class="pp-menu-list" tabindex="0">
                                            <div><label class="pp-menu-label" for="pp-uploader"><a class="item edit-symbol"><i class="fa fa-pencil"></i>&nbsp;<span class="edit-pp" data-localize="common.edit"></span></a></label></div>
                                            <div><a class="item delete-member-image"><i class="fa fa-trash"></i>&nbsp;<span class="delete-pp" data-localize="common.delete"></span></a></div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title" data-localize="user-settings.username"></div>
                                </td>
                                <td>
                                    <div class="input">
                                        <input id="username" type="text" value="" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title" data-localize="user-settings.api-key"></div>
                                </td>
                                <td>
                                    <div class="input">
                                        <input id="api-key" type="text" value="" readonly onclick='this.select()' />
                                        <br/>
                                        <div id="usersettings_regenerate" class='small-link' data-localize="user-settings.regenerate-api-key"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="title" data-localize="configs.password"></div>
                                </td>
                                <td>
                                    <div class='icon-button delete-app' id="user-configuration-change-password" data-localize="user-settings.change-password"></div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                {{/if}} {{{configs}}}
            </table>

            <div id="empty-search-result" style="display: none" data-localize="configs.no-search-result">There aren’t any configurations matching your search.</div>
        </div>
    </div>
</div>

<div class="user-config-danger-zone">
    <div id="configs-table-widget">
        {{#if user}}
        <tr>
            <td data-localize="user-settigs.delete-account"></td>
            <td>
                <table class="d-table help-zone-vb " cellpadding="0" cellspacing="0">
                    <tr id="danger-table-row">
                        <td id='danger-table-td'>
                            <span data-localize="configs.danger-zone"></span>
                        </td>
                        <td id="danger-table-description">
                            <div class="title" data-localize="user-settigs.delete-account"></div>
                            <div class="danger-zone-description" data-localize="configs.cannot-be-undone"></div>
                            <div class="danger-zone-description" id="danger-zone-description-second" data-localize="configs.will-permanently-delete"></div>
                        </td>
                        <td style='padding-bottom: 19px;'>
                            <div class="input">
                                <div class='icon-button delete-app' id="delete-user-account-button" data-localize="user-settigs.delete-account"></div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        {{/if}}
    </div>
</div>

<div class="user-configuration-modal" id="user-change-password-modal">
    <div class="user-configuration-modal-body">
        <div class="title-section">
            <span class="popup-title" data-localize="configs.change-password"></span>
            <p class="popup-description" data-localize="configs.password-specification-1"></p>
            <p class="popup-description-next" data-localize="configs.password-specification-2"></p>  
        </div>
        <div class="input-section">
        	<label for="old_pwd" class="popup-input-label" data-localize="configs.current-password"></label>
            <input type="password" id="old_pwd" placeholder="Enter your old password" class="user-password-change-modal-input">
            <label for="new_pwd" class="popup-input-label" data-localize="configs.new-password"></label>
            <input id="new_pwd" placeholder="Enter your new password" type="password" class="user-password-change-modal-input">
            <label for="re_new_pwd" class="popup-input-label" data-localize="configs.confirmation"></label>
            <input id="re_new_pwd" placeholder="Enter your new password again" type="password" class="user-password-change-modal-input">
        </div>
        <div class="action-section">
            <button class="popup-action-transparent-btn hide-user-configuration-modal" data-localize="configs.cancel"></button>
            <button class="popup-action-green-btn" id="change-user-password" data-localize="configs.change-password"></button>
        </div>
    </div>
</div>

<div class="user-configuration-modal" id="user-account-delete-modal">
    <div class="user-configuration-modal-body">
        <div class="title-section">
            <span class="popup-title" data-localize="configs.delete-account"></span>
            <span class="popup-description">
                <ul>
                    <li data-localize="configs.cannot-be-undone"></li>
                    <li data-localize="configs.will-permanently-delete"></li>
                </ul>
                <span data-localize="configs.confirm-for-delete"></span>
            </span>    
        </div>
        <div class="input-section">
        	<label for="re_new_pwd" class="popup-input-label" data-localize="configs.confirmation"></label>
            <input type="password" id="delete_account_password" placeholder="Enter your password" class="user-password-change-modal-input">
        </div>
        <div class="action-section">
            <button class="popup-action-transparent-btn hide-user-configuration-modal" data-localize="configs.cancel"></button>
            <button class="popup-action-red-btn" id="delete-user-account" data-localize="configs.delete-my-account"></button>
        </div>
    </div>
</div>
