<div class="settings-container">

    <ul class="nav nav-pills nav-stacked">
        <li ed-scroll-spy data-target="#homepage"><a href="">{{:: 'homepage' | translate }}</a></li>
        <li ed-scroll-spy data-target="#meta"><a href="">{{:: 'generalSettings' | translate }}</a></li>
        <li ed-scroll-spy data-target="#payments"><a href="">{{:: 'payments' | translate }}</a></li>
        <li ed-scroll-spy data-target="#validation"><a href="">{{:: 'validation' | translate }}</a></li>
        <li ed-scroll-spy data-target="#users"><a href="">{{:: 'users' | translate }}</a></li>
        <li ed-scroll-spy data-target="#keys"><a href="">{{:: '3rdPartyServiceKeys' | translate }}</a></li>
    </ul>

    <form ng-submit="updateSettings()">
        <section class="settings-panel" id="homepage">
            <div class="settings-panel-header"><i class="icon icon-users"></i> {{:: 'homepage' | translate }}</div>
            <div class="settings-panel-body">

                <section class="settings-select">
                    <div class="select-label">{{:: 'homepage' | translate }}</div>
                    <md-select ng-model="settings.homepage">
                        <md-option value="landing" translate>landingPage</md-option>
                        <md-option value="login" translate>loginPage</md-option>
                        <md-option value="custom" translate>customPage</md-option>
                    </md-select>
                    <p>{{:: 'homepageExpl' | translate }}</p>
                </section>

                <md-input-container ng-if="settings.homepage === 'custom'">
                    <label>{{:: 'customHomepagePath' | translate }}</label>
                    <input ng-model="settings.customHomePath"/>
                    <p>{{:: 'customHomepagePathExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'homeTagline' | translate }}</label>
                    <input ng-model="settings.homeTagline"/>
                    <p>{{:: 'homeTaglineExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'homeByline' | translate }}</label>
                    <input ng-model="settings.homeByline"/>
                    <p>{{:: 'homeBylineExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'homeButtonText' | translate }}</label>
                    <input ng-model="settings.homeButtonText"/>
                    <p>{{:: 'homeButtonTextExpl' | translate }}</p>
                </md-input-container>

                <md-button class="md-primary md-raised" type="submit">{{:: 'update' | translate }}</md-button>
            </div>
        </section>

        <section class="settings-panel" id="meta">
            <div class="settings-panel-header">{{:: 'generalSettings' | translate }}</div>
            <div class="settings-panel-body">
                <md-input-container>
                    <label>{{:: 'siteName' | translate }}</label>
                    <input ng-model="settings.siteName"/>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'metaTitle' | translate }}</label>
                    <input ng-model="settings.metaTitle"/>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'metaDescription' | translate }}</label>
                    <textarea ng-model="settings.metaDescription"></textarea>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'dateLocale' | translate }}</label>
                    <input ng-model="settings.dateLocale"/>
                    <p>{{:: 'dateLocaleExpl' | translate }} <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">Wikipedia</a></p>
                </md-input-container>

                <section class="settings-select">
                    <div class="select-label">{{:: 'enablePushState' | translate }}</div>
                    <md-select ng-model="settings.enablePushState">
                        <md-option value="1" translate>yes</md-option>
                        <md-option value="0" translate>no</md-option>
                    </md-select>
                </section>

                <md-input-container ng-if="settings.enablePushState == 1">
                    <label>PushState Root URL</label>
                    <input ng-model="settings.pushStateRootUrl"/>
                </md-input-container>


                <md-button class="md-primary md-raised" type="submit">{{:: 'update' | translate }}</md-button>
            </div>
        </section>

        <section class="settings-panel" id="payments">
            <div class="settings-panel-header">{{:: 'payments' | translate }}</div>
            <div class="settings-panel-body">
                <section class="settings-select">
                    <div class="select-label">{{:: 'enablePaymentsSystem' | translate }}</div>
                    <md-select ng-model="settings.enablePayments">
                        <md-option value="1" translate>yes</md-option>
                        <md-option value="0" translate>no</md-option>
                    </md-select>
                    <p>{{:: 'enablePaymentsSystemExpl' | translate }}</p>
                </section>

                <md-input-container>
                    <label>{{:: 'freePlanSpace' | translate }}</label>
                    <input ng-model="settings.maxUserSpace"/>
                    <p>{{:: 'maxUserSpaceExpl' | translate }} <a target="_blank" href="http://www.whatsabyte.com/P1/byteconverter.htm">{{:: 'converter' | translate }}</a></p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'invoiceProduct' | translate }}</label>
                    <input ng-model="settings.invoiceProduct"/>
                    <p>{{:: 'invoiceProductExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'invoiceVendor' | translate }}</label>
                    <input ng-model="settings.invoiceVendor"/>
                    <p>{{:: 'invoiceVendorExpl' | translate }}</p>
                </md-input-container>

                <md-button class="md-primary md-raised" type="submit">{{:: 'update' | translate }}</md-button>
            </div>
        </section>

        <section class="settings-panel" id="validation">
            <div class="settings-panel-header">{{:: 'filesValidation' | translate }}</div>
            <div class="settings-panel-body">
                <md-input-container>
                    <label>{{:: 'maxFileSize' | translate }}</label>
                    <input ng-model="settings.maxFileSize"/>
                    <p>{{:: 'maxFileSizeExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'whitelist' | translate }}</label>
                    <input ng-model="settings.whitelist"/>
                    <p>{{:: 'whitelistExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'blacklist' | translate }}</label>
                    <input ng-model="settings.blacklist"/>
                    <p>{{:: 'blacklistExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'maxSimultUploads' | translate }}</label>
                    <input ng-model="settings.maxSimultUploads"/>
                    <p>{{:: 'maxSimultUploadsExpl' | translate }}</p>
                </md-input-container>

                <md-button class="md-primary md-raised" type="submit">{{:: 'update' | translate }}</md-button>
            </div>
        </section>

        <section class="settings-panel" id="users">
            <div class="settings-panel-header"><i class="icon icon-users"></i> {{:: 'users' | translate }}</div>
            <div class="settings-panel-body">

                <section class="settings-select">
                    <div class="select-label">{{:: 'enableRegistration' | translate }}</div>
                    <md-select ng-model="settings.enableRegistration">
                        <md-option value="1" translate>yes</md-option>
                        <md-option value="0" translate>no</md-option>
                    </md-select>
                    <p>{{:: 'enableRegistrationExpl' | translate }}</p>
                </section>

                <md-button class="md-primary md-raised" type="submit">{{:: 'update' | translate }}</md-button>
            </div>
        </section>

        <section class="settings-panel" id="keys">
            <div class="settings-panel-header clearfix">
                <div class="pull-left">
                    {{:: '3rdPartyServiceKeys' | translate }}
                    <p class="setting-info">{{:: 'socialLoginKeysExpl' | translate }}</p>
                </div>
                <md-button type="button" class="md-primary md-raised pull-right" show-admin-keys>{{:: 'showKeys' | translate }}</md-button>
            </div>
            <div class="settings-panel-body">
                <md-input-container>
                    <label>{{:: 'stripePubKey' | translate }}</label>
                    <input ng-model="settings.stripePubKey" type="password">
                    <p>{{:: 'stripePubKeyExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'stripeSecretKey' | translate }}</label>
                    <input ng-model="settings.stripe_secret_key" type="password">
                    <p>{{:: 'stripePubKeyExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'disqusShortname' | translate }}</label>
                    <input ng-model="settings.disqusShortname" type="password">
                    <p>{{:: 'disqusShortnameExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>Mandrill API Key</label>
                    <input ng-model="settings.mandrill_api_key" type="password">
                    <p>{{:: 'mandrillExpl' | translate }}</p>
                </md-input-container>

                <md-input-container>
                    <label>Facebook {{:: 'id' | translate }}</label>
                    <input ng-model="settings.facebook_id" type="password"/>
                </md-input-container>

                <md-input-container>
                    <label>Facebook {{:: 'secret' | translate }}</label>
                    <input ng-model="settings.facebook_secret" type="password"/>
                </md-input-container>

                <md-input-container>
                    <label>Twitter {{:: 'id' | translate }}</label>
                    <input ng-model="settings.twitter_id" type="password"/>
                </md-input-container>

                <md-input-container>
                    <label>Twitter {{:: 'secret' | translate }}</label>
                    <input ng-model="settings.twitter_secret" type="password"/>
                </md-input-container>

                <md-input-container>
                    <label>Google {{:: 'id' | translate }}</label>
                    <input ng-model="settings.google_id" type="password"/>
                </md-input-container>

                <md-input-container>
                    <label>Google {{:: 'secret' | translate }}</label>
                    <input ng-model="settings.google_secret" type="password"/>
                </md-input-container>

                <md-input-container>
                    <label>{{:: 'googleAnalyticsCode' | translate }}</label>
                    <input ng-model="settings.analytics" type="password">
                    <p>{{:: 'googleAnalyticsCodeExpl' | translate }}</p>
                </md-input-container>

                <md-button class="md-primary md-raised" type="submit">{{:: 'update' | translate }}</md-button>
            </div>
        </section>
    </form>
</div>

