<div class="mainContainer custCol-background">

  <div class="userBar">
    <div class="title-section custCol-primary-darken shadow-inner1-ultra-light">
      <div class="thumbnail pull-left"
        <% if(ob.page.profile.avatar_hash) { %>
        style="background-image: url(<%= ob.user.serverUrl %>get_image?hash=<%= ob.page.profile.avatar_hash %>), url(imgs/defaultUser.png);">
        <% } else { %>
        style="background-image: url(imgs/defaultUser.png);">
        <% } %>
      </div>
      <h1 class="fancy-heading fontSize20 vCentered colorWhiteForce textShadow"><%= polyglot.t('nav.settings') %></h1>
      <a href="#userPage" class="btn btn-txt custCol-primary positionWrapper pull-right right10 marginTop9 marginLeft6">
        <span class="ion-document-text fontSize11 marginRight2 textOpacity1"></span>
        <%= polyglot.t('GoToMyPage') %>
      </a>
      <a href="#transactions" class="btn btn-txt custCol-primary positionWrapper pull-right right10 marginTop9 marginLeft6">
        <span class="ion-log-out fontSize11 marginRight2 textOpacity1"></span>
        <%= polyglot.t('Transactions') %>
      </a>
    </div>
  </div>

  <div class="bar navBar barFlush custCol-secondary clearFix height55">
    <a class="btn btn-bar btn-tab custCol-secondary js-tab js-generalTab active" data-tab="general">
      <span class="ion-toggle-filled fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('General') %>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-tab js-pageTab" data-tab="page">
      <span class="ion-document-text fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Page') %>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-tab js-storeTab" data-tab="store">
      <span class="ion-ios-cart fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Store') %>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-tab js-addressesTab" data-tab="addresses">
      <span class="ion-ios-location fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Addresses') %>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-tab js-blockedTab" data-tab="blocked">
      <span class="ion-sad fontSize11 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Blocked') %>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-tab js-moderatorTab" data-tab="moderator">
      <span class="ion-android-compass fontSize12 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Moderator') %>
    </a>
    <a class="btn btn-bar btn-tab custCol-secondary js-tab js-advancedTab" data-tab="advanced">
      <span class="ion-erlenmeyer-flask fontSize12 marginRight2 textOpacity1"></span>
      <%= polyglot.t('Advanced') %>
    </a>
  </div>

  <div class="flexContainer flex-border color-primary custCol-primary">
    <div class="flexRow border0 minHeight650">
      <div class="flexRow flexExpand">
        <form class="width100" name="generalForm" id="generalForm">
          <div class="flexCol-12 flex-border js-tabTarg js-general">
            <div class="flexRow borderBottom custCol-border">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('General') %></h3>
            </div>

            <div class="flexRow overflowVisible">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label for="language">
                    <%= polyglot.t('Language') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <div class="fieldItem-selectWrapper noIcon">
                    <select name="language" class="chosen" id="language">
                    </select>
                  </div>
                </div>
              </div>

            </div>

            <div class="flexRow overflowVisible">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label for="country">
                    <%= polyglot.t('ShipToCountry') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <div class="fieldItem-selectWrapper noIcon">
                    <select name="country" class="chosen" id="country">
                    </select>
                  </div>
                </div>
              </div>

            </div>

            <div class="flexRow overflowVisible">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label for="currency_code">
                    <%= polyglot.t('LocalCurrency') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <div class="fieldItem-selectWrapper chosen-relative noIcon">
                    <select name="currency_code" class="chosen" id="currency_code">
                    </select>
                  </div>
                </div>
              </div>

            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label><%= polyglot.t('BitcoinUnit') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem">
                  <input type="radio" class="fieldItem" id="bitcoinUnitBTC" name="bitcoinUnit" value="BTC" />
                  <label for="bitcoinUnitBTC" class="radioLabel">BTC</label>
                  <input type="radio" class="fieldItem" id="bitcoinUnitmBTC" name="bitcoinUnit" value="mBTC" />
                  <label for="bitcoinUnitmBTC" class="radioLabel">mBTC</label>
                  <input type="radio" class="fieldItem" id="bitcoinUnitμBTC" name="bitcoinUnit" value="μBTC" />
                  <label for="bitcoinUnitμBTC" class="radioLabel">μBTC</label>
                  <input type="radio" class="fieldItem" id="bitcoinUnitSat" name="bitcoinUnit" value="sat" />
                  <label for="bitcoinUnitSat" class="radioLabel">Satoshi (sat)</label>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('EnableNotifications') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem">
                  <input type="radio" class="fieldItem" id="enableNotificationsYes" name="notifications" value="true" checked /><label for="enableNotificationsYes" class="radioLabel"><%= polyglot.t('Yes') %></label>
                  <input type="radio" class="fieldItem" id="enableNotificationsNo" name="notifications" value="false"/><label for="enableNotificationsNo" class="radioLabel"><%= polyglot.t('No') %></label>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('DisplayNSFWcontent') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem">
                  <input type="radio" class="fieldItem" id="display_nsfw_content_yes" name="nsfw" value="true" /><label for="display_nsfw_content_yes" class="radioLabel"><%= polyglot.t('Yes') %></label>
                  <input type="radio" class="fieldItem" id="display_nsfw_content_no" name="nsfw" value="false" checked /><label for="display_nsfw_content_no" class="radioLabel"><%= polyglot.t('No') %></label>
                </div>
              </div>
            </div>

            <a class="btn btn-large js-saveGeneral custCol-secondary pull-right marginRight15 marginTop15 marginBottom50 btn-secondary">
              <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
              <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
            </a>
            <a class="btn btn-large js-cancelGeneral custCol-secondary pull-right marginRight5 marginTop15 marginBottom50 btn-secondary width87px"><%= polyglot.t('Reset') %></a>

          </div>
        </form>
        <form class="width100" name="pageForm" id="pageForm">

          <div class="flexCol-12 flex-border js-tabTarg js-page hide">
            <div class="flexRow borderBottom custCol-border">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Basic') %></h3>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="name"><%= polyglot.t('Name') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="name"
                       type="text"
                       id="name"
                       placeholder="<%= polyglot.t('YourName') %>"
                       class="fieldItem"
                       required
                       value="<%= ob.page.profile.name %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="handle"><%= polyglot.t('onboarding.handle') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border positionWrapper">
                <input name="handle"
                       type="text"
                       id="handle"
                       placeholder="@john"
                       class="fieldItem"
                       pattern="@[a-zA-Z0-9_]+"
                       value="<%= ob.page.profile.temp_handle || ob.page.profile.handle %>">
                <div class="positionTopRight padding10">
                  <% if(ob.page.profile.temp_handle && !ob.page.profile.handle){ %>
                    <a class="btn btn-txt custCol-secondary tooltip tooltip-left tooltip-box js-savePage"
                       data-tooltip="<%= polyglot.t('StillValidating') %>">
                      <%= polyglot.t('RefreshHandleStatus') %>
                    </a>
                  <% } %>
                  <a class="btn btn-txt custCol-secondary tooltip tooltip-left tooltip-box"
                     data-tooltip="<%= polyglot.t('GoToOneNameTooltip') %>" href="https://onename.com/">
                    <%= polyglot.t('GoToOneName') %> <i class="ion-android-open fontSize10"></i>
                  </a>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="short_description"><%= polyglot.t('ShortDescription') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <textarea
                  name="short_description"
                  id="short_description"
                  rows="2"
                  class="fieldItem-textarea"
                  maxlength="160"
                  placeholder="<%= polyglot.t('ShortDescriptionPlaceholder') %>"><%= ob.page.profile.short_description %></textarea>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('NSFW') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem marginLeft6">
                  <input type="radio" class="fieldItem" id="store_nsfw_yes" name="nsfw" value="true" /><label for="store_nsfw_yes" class="radioLabel"><%= polyglot.t('Yes') %></label>
                  <input type="radio" class="fieldItem" id="store_nsfw_no" name="nsfw" value="false" checked /><label for="store_nsfw_no" class="radioLabel"><%= polyglot.t('No') %></label>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem" id="avatar-field">
                  <label for="settingsAvatarInput"><%= polyglot.t('Avatar') %></label>
                </div>
              </div>
              <div class="flexCol-9 borderRight0 custCol-border">
                <div id="settings-image-cropper" class="positionWrapper flexRow">
                  <div class="statusBar navBar fadeOut positionAbsolute js-avatarLoading">
                    <div class="pad20 rowTop20 width100"><h4 class="txt-center"><%= polyglot.t('LoadingImage') %></h4></div>
                  </div>
                  <div class="cropit-image-preview cropit-avatar js-settingsAvatarPreview rowTop20 thumbnail thumbnail-huge box-border row20 marginLeft12"></div>
                  <div class="rowTop20 marginLeft12 flexCol-3">
                    <div class="flexRow row20">
                      <a class="btn flexExpand marginRight5 color-secondary custCol-secondary ion-reply disabled js-avatarRotateLeft"></a>
                      <a class="btn flexExpand marginLeft5 color-secondary custCol-secondary ion-forward disabled js-avatarRotateRight"></a>
                    </div>
                    <div>
                      <input type="range" class="cropit-image-zoom-input row20 disabled js-avatarZoom" />
                    </div>
                    <div>
                      <input type="file" id="settingsAvatarInput" class="cropit-image-input hide" />
                      <label for="settingsAvatarInput" class="btn btn-txt rowTop20 row20 width100 color-secondary custCol-secondary"><%= polyglot.t('NewAvatar') %></label>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="flexRow borderBottom custCol-border marginTop20">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Social') %></h3>
            </div>


            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="website"><%= polyglot.t('Website') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="website"
                       type="url"
                       id="website"
                       placeholder="http://mywebsite.com"
                       class="fieldItem"
                       value="<%= ob.page.profile.website %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="email"><%= polyglot.t('Email') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="email"
                       type="email"
                       id="email"
                       placeholder="me@email.com"
                       class="fieldItem"
                       value="<%= ob.page.profile.email %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsFacebookInput"><%= polyglot.t('Facebook') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="facebook"
                       type="text"
                       id="settingsFacebookInput"
                       data-type="facebook"
                       pattern="^[a-z\d\.]{5,}$"
                       placeholder="<%= polyglot.t('Username') %>"
                       class="fieldItem"
                       value="<%= ob.page.profile.social_accounts.facebook.username %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsTwitterInput"><%= polyglot.t('Twitter') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="twitter"
                       type="text"
                       id="settingsTwitterInput"
                       data-type="twitter"
                       pattern="^[A-Za-z0-9_]{1,32}$"
                       placeholder="<%= polyglot.t('Username') %>"
                       class="fieldItem"
                       value="<%= ob.page.profile.social_accounts.twitter.username %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsInstagramInput"><%= polyglot.t('Instagram') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="instagram"
                       type="text"
                       id="settingsInstagramInput"
                       data-type="instagram"
                       pattern="([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)"
                       placeholder="<%= polyglot.t('Username') %>"
                       class="fieldItem"
                       value="<%= ob.page.profile.social_accounts.instagram.username %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsSnapchatInput"><%= polyglot.t('Snapchat') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="snapchat"
                       type="text"
                       id="settingsSnapchatInput"
                       data-type="snapchat"
                       placeholder="<%= polyglot.t('Username') %>"
                       class="fieldItem"
                       value="<%= ob.page.profile.social_accounts.snapchat.username %>">
              </div>
            </div>

            <div class="flexRow borderBottom custCol-border marginTop20">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('About') %></h3>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="about"><%= polyglot.t('About') %></label>
                  <div>
                    <span class="fontSize10 textOpacity50"><%= polyglot.t('HighlightToStyle') %></span>
                  </div>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
               <textarea
                    name="about"
                    id="about"
                    rows="10"
                    class="fieldItem-textarea height130 customThemeScrollbar"
                    placeholder="<%= polyglot.t('AboutPlaceholder') %>"><%= ob.page.profile.about %></textarea>
              </div>
            </div>

            <div class="flexRow borderBottom custCol-border marginTop20">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Theme') %></h3>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label><%= polyglot.t('StandardThemes') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="flexRow">
                 <div class="theme-container clearfix custCol-border borderRight borderBottom">
                    <input type="radio" name="settings-theme-selection" class="js-settingsThemeSelection fieldItem marginBottom20"
                           id="settings-theme-1"
                           data-primary-color="#ba4a3f"
                           data-secondary-color="#cc504b"
                           data-background-color="#5E3E36"
                           data-text-color="#ffffff"
                           data-cover-photo="imgs/themes/1/header.png" />
                    <label for="settings-theme-1" class="radioLabel">
                      <div class="theme-background" style="background: #5E3E36">
                        <div class="theme-global-header" style="background: #cc504b"></div>
                        <div class="theme-header" style="background: url(imgs/themes/1/header-thumbnail.png); background-size: cover"></div>
                        <div class="theme-nav" style="background: #cc504b">
                          <div class="theme-tab" style="background: #ba4a3f"></div>
                        </div>
                        <div class="theme-body" style="background: #ba4a3f"></div>
                      </div>
                    </label>
                  </div>

                  <div class="theme-container clearfix custCol-border borderRight borderBottom">
                    <input type="radio" name="settings-theme-selection" class="js-settingsThemeSelection fieldItem marginBottom20"
                           id="settings-theme-2"
                           data-primary-color="#ffffff"
                           data-secondary-color="#E6E6E6"
                           data-background-color="#B2B2B2"
                           data-text-color="#545454"
                           data-cover-photo="imgs/themes/2/header.png" />
                    <label for="settings-theme-2" class="radioLabel">
                      <div class="theme-background" style="background: #B2B2B2">
                        <div class="theme-global-header" style="background: #E6E6E6"></div>
                        <div class="theme-header" style="background: url(imgs/themes/2/header-thumbnail.png); background-size: cover"></div>
                        <div class="theme-nav" style="background: #E6E6E6">
                          <div class="theme-tab" style="background: #ffffff"></div>
                        </div>
                        <div class="theme-body" style="background: #ffffff"></div>
                      </div>
                    </label>
                  </div>

                  <div class="theme-container clearfix custCol-border borderBottom">
                    <input type="radio" name="settings-theme-selection" class="js-settingsThemeSelection fieldItem marginBottom20"
                           id="settings-theme-3"
                           data-primary-color="#474559"
                           data-secondary-color="#353443"
                           data-background-color="#1d1d25"
                           data-text-color="#ffffff"
                           data-cover-photo="imgs/themes/3/header.png" />
                    <label for="settings-theme-3" class="radioLabel">
                      <div class="theme-background" style="background: #1d1d25">
                        <div class="theme-global-header" style="background: #353443"></div>
                        <div class="theme-header" style="background: url(imgs/themes/3/header-thumbnail.png); background-size: cover"></div>
                        <div class="theme-nav" style="background: #353443">
                          <div class="theme-tab" style="background: #474559"></div>
                        </div>
                        <div class="theme-body" style="background: #474559"></div>
                      </div>
                    </label>
                  </div>

                  <div class="theme-container clearfix custCol-border borderRight">
                    <input type="radio" name="settings-theme-selection" class="js-settingsThemeSelection fieldItem marginBottom20" id="settings-theme-4" data-primary-color="#929e8e" data-secondary-color="#6e776b" data-background-color="#3d413b" data-text-color="#ffffff" data-cover-photo="imgs/themes/4/header.png" />
                    <label for="settings-theme-4" class="radioLabel">
                      <div class="theme-background" style="background: #3d413b">
                        <div class="theme-global-header" style="background: #6e776b"></div>
                        <div class="theme-header" style="background: url(imgs/themes/4/header-thumbnail.png); background-size: cover"></div>
                        <div class="theme-nav" style="background: #6e776b">
                          <div class="theme-tab" style="background: #929e8e"></div>
                        </div>
                        <div class="theme-body" style="background: #929e8e"></div>
                      </div>
                    </label>
                  </div>

                  <div class="theme-container clearfix custCol-border borderRight">
                    <input type="radio" name="settings-theme-selection" class="js-settingsThemeSelection fieldItem marginBottom20" id="settings-theme-5" data-primary-color="#41658a" data-secondary-color="#334e6a" data-background-color="#1c2b3a" data-text-color="#ffffff" data-cover-photo="imgs/themes/5/header.png" />
                    <label for="settings-theme-5" class="radioLabel">
                      <div class="theme-background" style="background: #1c2b3a">
                        <div class="theme-global-header" style="background: #334e6a"></div>
                        <div class="theme-header" style="background: url(imgs/themes/5/header-thumbnail.png); background-size: cover"></div>
                        <div class="theme-nav" style="background: #334e6a">
                          <div class="theme-tab" style="background: #41658a"></div>
                        </div>
                        <div class="theme-body" style="background: #41658a"></div>
                      </div>
                    </label>
                  </div>

                  <div class="theme-container clearfix custCol-border">
                    <input type="radio" name="settings-theme-selection" class="js-settingsThemeSelection fieldItem marginBottom20" id="settings-theme-6"  data-primary-color="#252525" data-secondary-color="#1B1B1B" data-background-color="#141414" data-text-color="#ffffff" data-cover-photo="imgs/themes/6/header.png" />
                    <label for="settings-theme-6" class="radioLabel">
                      <div class="theme-background" style="background: #141414">
                        <div class="theme-global-header" style="background: #1B1B1B"></div>
                        <div class="theme-header" style="background: url(imgs/themes/6/header-thumbnail.png); background-size: cover"></div>
                        <div class="theme-nav" style="background: #1B1B1B">
                          <div class="theme-tab" style="background: #252525"></div>
                        </div>
                        <div class="theme-body" style="background: #252525"></div>
                      </div>
                    </label>
                  </div>

                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label><%= polyglot.t('CoverPhoto') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border js-settingsCoverPhoto">
                <div id="settings-image-cropperBanner" class="banner-settings positionWrapper">
                  <div class="statusBar navBar fadeOut positionAbsolute js-bannerLoading">
                    <div class="pad20 rowTop20 width100"><h4 class="txt-center"><%= polyglot.t('LoadingImage') %></h4></div>
                  </div>
                  <div class="cropit-image-preview banner-settings positionTop js-settingsBannerPreview"></div>
                  <div class="positionBottom hCentered row100">
                    <input type="range" class="cropit-image-zoom-input" />
                  </div>
                  <input type="file" id="settingsBannerInput" class="cropit-image-input hide" />
                  <label for="settingsBannerInput" class="btn btn-txt positionBottom hCentered row20 color-secondary custCol-secondary"><%= polyglot.t('NewCoverImage') %></label>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="primaryColor"><%= polyglot.t('PrimaryColor') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="primary_color"
                       type="text"
                       id="primaryColor"
                       class="fieldItem"
                       pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                       value="<%= ob.page.profile.primary_color %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="secondaryColor"><%= polyglot.t('SecondaryColor') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="secondary_color"
                       type="text"
                       id="secondaryColor"
                       class="fieldItem"
                       pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                       value="<%= ob.page.profile.secondary_color %>">
              </div>
            </div>


            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="backgroundColor"><%= polyglot.t('BackgroundColor') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="background_color"
                       type="text"
                       id="backgroundColor"
                       class="fieldItem"
                       pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                       value="<%= ob.page.profile.background_color %>">
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="textColor"><%= polyglot.t('TextColor') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="text_color"
                       type="text"
                       id="textColor"
                       class="fieldItem"
                       pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                       value="<%= ob.page.profile.text_color %>">
              </div>
            </div>

            <a class="btn btn-large js-savePage custCol-secondary pull-right marginRight15 marginTop15 marginBottom50 btn-secondary">
              <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
              <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
            </a>
            <a class="btn btn-large js-cancelPage custCol-secondary pull-right marginRight5 marginTop15 marginBottom50 btn-secondary width87px"><%= polyglot.t('Reset') %></a>

          </div>
        </form>
        <form class="width100" name="storeForm" id="storeForm">
          <div class="flexCol-12 flex-border hide js-tabTarg js-store">
            <div class="flexRow borderBottom custCol-border">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Basic') %></h3>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('ActiveStore') %>
                  </label>
                  <div>
                    <label class="textSize11px txt-unleaded textOpacity50 marginTop2">
                      <%= polyglot.t('ActiveStoreDetails') %>
                    </label>
                  </div>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem marginLeft6">
                  <input type="radio" class="fieldItem" id="store_active_on" name="vendor" value="true" checked />
                  <label for="store_active_on" class="radioLabel"><%= polyglot.t('On') %></label>
                  <input type="radio" class="fieldItem" id="store_active_off" name="vendor" value="false"/>
                  <label for="store_active_off" class="radioLabel"><%= polyglot.t('Off') %></label>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label> <!--for="moderators"-->
                    <%= polyglot.t('CurrentModerators') %>
                  </label>
                  <div class="row20">
                    <label class="textSize11px txt-unleaded textOpacity50 marginTop2"><%= polyglot.t('DeselectToRemoveModerator') %></label>
                  </div>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="hideTopAndBottomBorder js-settingsCurrentMods">
                </div>
                <div class="padding10 width100 alignCenter fadeable js-loadingMsgOld">
                  <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label> <!--for="moderators"-->
                    <%= polyglot.t('AddModerators') %>
                  </label>
                  <div class="row20">
                    <label class="textSize11px txt-unleaded textOpacity50 marginTop2"><%= polyglot.t('SelectToAddModerator') %></label>
                  </div>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="hideTopAndBottomBorder js-settingsNewMods">
                </div>
                <div class="padding10 width100 alignCenter fadeable js-loadingMsgNew">
                  <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border zIndex1"><!-- add z-index so help box overlaps next column-->
                <div class="fieldItem">
                  <label for="addManualMods" class="tooltip tooltip-box" data-tooltip="<%= polyglot.t('ManualAddModeratorHelp') %>">
                    <%= polyglot.t('ManualAddModerator') %> <i class="ion-help-circled"></i>
                  </label>

                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <input name="manualMods"
                         type="text"
                         id="addManualMods"
                         class="fieldItem">
                </div>
              </div>
            </div>

            <div class="flexRow TODO">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label for="store-keywords">
                    <%= polyglot.t('Keywords') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <!--TODO: keywords input here -->
                  <input id="store-keywords">
                </div>
              </div>
            </div>

            <div class="flexRow borderBottom custCol-border marginTop20 TODO">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Content') %></h3>
            </div>

            <div class="flexRow TODO">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label for="terms_conditions">
                    <%= polyglot.t('TermsAndConditions') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <textarea disabled
                    name="terms_conditions"
                    id="terms_conditions"
                    rows="6"
                    class="fieldItem-textarea"
                    placeholder="<%= ob.user.terms_conditions %>"></textarea>
                </div>
              </div>
            </div>

            <div class="flexRow TODO">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label for="refund_policy">
                    <%= polyglot.t('ReturnPolicy') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <textarea disabled
                    name="refund_policy"
                    id="refund_policy"
                    rows="6"
                    class="fieldItem-textarea"
                    placeholder="<%= ob.user.refund_policy%>"></textarea>
                </div>
              </div>
            </div>

            <a class="btn btn-large js-saveStore custCol-secondary pull-right marginRight15 marginTop15 marginBottom5 btn-secondary">
              <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
              <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
            </a>
            <a class="btn btn-large js-cancelStore custCol-secondary pull-right marginRight5 marginTop15 marginBottom50 btn-secondary width87px"><%= polyglot.t('Reset') %></a>
          </div>
        </form>
        <form class="width100" name="addressesForm" id="addressesForm">
          <div class="flexCol-12 flex-border hide js-tabTarg js-addresses custCol-border">
            <% if(ob.user.shipping_addresses && ob.user.shipping_addresses.length > 0) { %>
            <div class="flexRow marginBottom20">
              <div class="flexRow">
                <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('CurrentAddress') %></h3>
              </div>
              <div class="flexRow pad5 rowTop15 js-sortableAddresses">
                <% _.each(ob.user.shipping_addresses, function(address, i){ %>
                <div class="flexCol-4 pad10 row15 addressesWrapper">
                  <div class="addressBox custCol-secondary custCol-border-background js-address">
                    <div class="textOpacity1 row40">
                      <div><%= address.name %></div>
                      <div><%= address.street %></div>
                      <div>
                        <% if(address.city) print(address.city) %>
                        <% if(address.city && address.state || address.city && address.postal_code) print(",") %>
                        <%= address.state %> <%= address.postal_code %>
                      </div>
                      <div><%= address.alternate_contact %></div>
                      <div><%= address.displayCountry %></div>
                    </div>

                    <div class="btn btn-txt positionBottom row10 custCol-primary clickable">
                      <input type="checkbox"
                             class="hide js-settingsAddress"
                             id="settingsAddress<%= i %>"
                             value="<%= i %>">
                      <label for="settingsAddress<%= i %>">
                        <span class="fontSize12 clickable togLabelOff js-settingsAddressDelete"><%= polyglot.t('Delete') %></span>
                        <span class="fontSize12 clickable togLabelOn js-settingsAddressUnDelete"><%= polyglot.t('DontDelete') %></span>
                      </label>
                    </div>
                    <div class="positionBottomRight defaultLabel padding10 note">
                      <%= polyglot.t('DefaultAddress') %>
                    </div>
                  </div>
                </div>
                <% }); %>
              </div>
            </div>
            <% } %>

            <div class="flexRow">

              <div class="flexRow custCol-border">
                <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('NewAddress') %></h3>
              </div>

              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsShipToName">
                    <%= polyglot.t('ShipToName') %> *
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="ship_to_name"
                       id="settingsShipToName"
                       type="text"
                       placeholder="<%= polyglot.t('ShipToName') %>"
                       class="fieldItem settingsAddressInput">
              </div>

            </div>

            <div class="flexRow">

              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsShipToStreet">
                    <%= polyglot.t('ShipToStreet') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="ship_to_street"
                       id="settingsShipToStreet"
                       type="text"
                       placeholder="<%= polyglot.t('ShipToStreet') %>"
                       class="fieldItem settingsAddressInput">
              </div>

            </div>

            <div class="flexRow">

              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsShipToCity">
                    <%= polyglot.t('ShipToCity') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="ship_to_city"
                       id="settingsShipToCity"
                       type="text"
                       placeholder="<%= polyglot.t('ShipToCity') %>"
                       class="fieldItem settingsAddressInput">
              </div>

            </div>

            <div class="flexRow">

              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsShipToState">
                    <%= polyglot.t('ShipToState') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="ship_to_state"
                       id="settingsShipToState"
                       type="text"
                       placeholder="<%= polyglot.t('ShipToState') %>"
                       class="fieldItem settingsAddressInput">
              </div>

            </div>

            <div class="flexRow">

              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsShipToPostalCode">
                    <%= polyglot.t('ShipToPostalCode') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="ship_to_postal_code"
                       id="settingsShipToPostalCode"
                       type="text"
                       placeholder="<%= polyglot.t('ShipToPostalCode') %>"
                       class="fieldItem settingsAddressInput">
              </div>

            </div>

            <div class="flexRow">

              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsShipToPostalCode">
                    <%= polyglot.t('ShipToOther') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="ship_to_other"
                       id="settingsShipToOther"
                       type="text"
                       placeholder="<%= polyglot.t('ShipToOtherPlaceholder') %>"
                       class="fieldItem settingsAddressInput">
              </div>

            </div>

            <div class="flexRow overflowVisible">

              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="settingsShipToCountry">
                    <%= polyglot.t('ShipToCountry') %> *
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem padding0">
                  <div class="fieldItem-selectWrapper chosen-relative noIcon positionWrapper">
                    <select
                      name="ship_to_country"
                      class="chosen settingsAddressInput"
                      id="settingsShipToCountry">
                    </select>
                  </div>
                </div>
              </div>

              <div class="padding15">
                <span class="note">* <%= polyglot.t('Required') %></span>
              </div>
            </div>

            <a class="btn btn-large js-saveAddress custCol-secondary pull-right marginRight15 marginTop15 marginBottom50 btn-secondary">
              <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
              <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
            </a>
            <a class="btn btn-large js-cancelAddress custCol-secondary pull-right marginRight5 marginTop15 marginBottom50 btn-secondary width87px"><%= polyglot.t('Reset') %></a>
          </div>
        </form>
        <form class="width100 positionWrapper" name="blockedForm" id="blockedForm">
          <div class="flexCol-12 flex-border js-tabTarg js-blocked hide"></div>
        </form>
        <form class="width100 positionWrapper" name="moderatorForm" id="moderatorForm">
          <div class="flexCol-12 flex-border js-tabTarg js-moderator hide">
            <div class="flexRow borderBottom custCol-border">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('moderatorSettings.DisputeResolution') %></h3>
            </div>
            <div class="flexRow">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label><%= polyglot.t('Status') %></label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border positionWrapper">
                <div class="fieldItem">
                  <input type="radio"
                         class="fieldItem"
                         id="moderatorYes"
                         name="moderator"
                         value="true" />
                  <label for="moderatorYes" class="radioLabel"><%= polyglot.t('On') %></label>
                  <input type="radio"
                         class="fieldItem"
                         id="moderatorNo"
                         name="moderator"
                         value="false"/>
                  <label for="moderatorNo" class="radioLabel"><%= polyglot.t('Off') %></label>
                </div>
              </div>
            </div>
            <div class="flexRow js-settingsModeratorFee
            <% if(!ob.page.profile.moderator) {%>
            hide
            <% } %>">
              <div class="flexCol-3 borderRight custCol-border">
                <div class="fieldItem">
                  <label for="moderatorFeeInput"><%= polyglot.t('moderatorSettings.ServiceFee') %></label>
                  <div class="textOpacity50 fontSize12"><%= polyglot.t('moderatorSettings.ServiceFeeNote') %></div>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input type="number"
                       min="0"
                       max="25"
                       step="0.01"
                       name="moderation_fee"
                       class="fieldItem custCol-text width70px floatLeft"
                       id="moderatorFeeInput"
                       value="<%= Number(ob.page.profile.moderation_fee).toFixed(2) %>" required/><div class="floatLeft marginLeft5 lineHeight51 fontWeight500 textOpacity75">%</div>
              </div>
            </div>
            <a class="btn btn-large js-saveModerator custCol-secondary pull-right marginRight15 marginTop15 marginBottom50 btn-secondary">
              <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
              <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
            </a>
            <a class="btn btn-large js-cancelModerator custCol-secondary pull-right marginRight5 marginTop15 marginBottom50 btn-secondary width87px"><%= polyglot.t('Reset') %></a>
          </div>

        </form>
        <form class="width100" name="advancedForm" id="advancedForm">
          <div class="flexCol-12 flex-border hide js-tabTarg js-advanced">
            <div class="flexRow borderBottom custCol-border">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight  custCol-border">
                <div class="fieldItem">
                  <label for="libbitcoin_server">
                    <%= polyglot.t('LibbitcoinServerAddress') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="libbitcoin_server"
                       id="libbitcoin_server"
                       type="text"
                       class="fieldItem"
                       pattern="^tcp:\/\/[A-Za-z0-9\.-]{4,}(?:\:\d{2,4})$"
                       placeholder="<%= polyglot.t('libbitcoinPlaceholder') %>"
                       value="<%= ob.user.libbitcoin_server %>">
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight  custCol-border">
                <div class="fieldItem">
                  <label for="resolver">
                    <%= polyglot.t('HandleResolver') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="resolver"
                       id="resolver"
                       type="text"
                       class="fieldItem"
                       value="<%= ob.user.resolver %>">
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('Firewall') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem">
                  <%= polyglot.t('firewall.' + ob.user.network_connection.replace(" ", "")) %>  <span class="txt-fade"><%= polyglot.t('ReadOnly') %></span>
                </div>
              </div>

            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label for="refund_address">
                    <%= polyglot.t('BitcoinAddress') %>
                  </label>
                  <i class="ion-help-circled tooltip tooltip-box" data-tooltip="<%= polyglot.t('BitcoinReturnAddressInfo') %>"></i>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border positionWrapper">
                <input name="refund_address"
                       type="text"
                       id="refund_address"
                       placeholder="<%= polyglot.t('Address') %>"
                       class="fieldItem"
                       pattern="<%= config.bitcoinValidationRegex %>"
                       value="<%= ob.user.refund_address %>">
                <% if(config.testnet) { %>
                <div class="positionTopRight padding10">
                  <span class="btn btn-txt custCol-secondary">
                    <%= polyglot.t('MustTestnetAddress') %>
                  </span>
                </div>
                <% } %>
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('NoFancyStyles') %>
                  </label>
                  <i class="ion-help-circled tooltip tooltip-box" data-tooltip="<%= polyglot.t('MinimalEffectsWarning') %>"></i>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem flexRow">
                  <div class="flexRow">
                    <div class="flexCol-4">
                      <input type="radio" class="fieldItem" id="fancyStylesYes" name="minEffects" value="true" />
                      <label for="fancyStylesYes" class="radioLabel"><%= polyglot.t('Yes') %></label>
                      <input type="radio" class="fieldItem" id="fancyStylesNo" name="minEffects" value="false" checked/>
                      <label for="fancyStylesNo" class="radioLabel"><%= polyglot.t('No') %></label>
                    </div>
                  </div>
                </div>
              </div>

            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('UseTestnet') %>
                  </label>
                  <i class="ion-help-circled tooltip tooltip-box" data-tooltip="<%= polyglot.t('UseTestnetHelp') %>"></i>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem flexRow">
                  <div class="flexRow">
                    <div class="flexCol-4">
                      <input type="radio" class="fieldItem" id="useTestnetYes" name="useTestnet" value="true" <% if(window.config.testnet){ %>checked<% } %> />
                      <label for="useTestnetYes" class="radioLabel"><%= polyglot.t('Yes') %></label>
                      <input type="radio" class="fieldItem" id="useTestnetNo" name="useTestnet" value="false" <% if(!window.config.testnet){ %>checked<% } %> />
                      <label for="useTestnetNo" class="radioLabel"><%= polyglot.t('No') %></label>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('AdditionalPaymentData') %>
                  </label>
                  <i class="ion-help-circled tooltip tooltip-box" data-tooltip="<%= polyglot.t('AdditionalPaymentDataInfo') %>"></i>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem">
                  <input type="radio" class="fieldItem" id="additional_payment_data_yes" name="additionalPaymentData" value="true" checked />
                  <label for="additional_payment_data_yes" class="radioLabel"><%= polyglot.t('Yes') %></label>
                  <input type="radio" class="fieldItem" id="additional_payment_data_no" name="additionalPaymentData" value="false" />
                  <label for="additional_payment_data_no" class="radioLabel"><%= polyglot.t('No') %></label>
                </div>
              </div>
            </div>

            <div class="flexRow">
              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('AppBarStyle') %>
                  </label>
                  <i class="ion-help-circled tooltip tooltip-box" data-tooltip="<%= polyglot.t('AppBarStyleInfo') %>"></i>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem">
                  <input type="radio" class="fieldItem" id="app_bar_style_windows" name="appBarStyle" value="win" checked />
                  <label for="app_bar_style_windows" class="radioLabel"><%= polyglot.t('OSWindows') %></label>
                  <input type="radio" class="fieldItem" id="app_bar_style_mac" name="appBarStyle" value="mac" />
                  <label for="app_bar_style_mac" class="radioLabel"><%= polyglot.t('OSMac') %></label>
                </div>
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('ServerSettings') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="padding10">
                  <a class="btn btn-txt custCol-secondary js-changeServerSettings"><%= polyglot.t('Change') %></a>
                </div>
              </div>

            </div>
            <div class="flexRow">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                     Connected Peers
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem flexRow">
                  <div class="flexRow">
                    <span class="js-numConnectedPeers"></span>
                    <div class="positionTopRight paddingright5">
                      <a id="showPeersButton" class="btn btn-txt js-showPeers custCol-secondary">
                        Show Connected Peers
                      </a>
                    </div>
                  </div>
                  <div class="flexRow">
                    <div class="peersList custCol-text customThemeScrollbar js-connectedPeers"></div>
                  </div>
                </div>
              </div>

            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('ShutDownServer') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="padding10">
                  <a class="btn btn-txt custCol-secondary ion-power js-shutDownServer"></a>
                </div>
              </div>

            </div>

            <div class="flexRow borderBottom custCol-border marginTop20">
              <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('SMTPNotifications') %></h3>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight custCol-border">
                <div class="fieldItem">
                  <label>
                    <%= polyglot.t('SMTPNotifications') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <div class="fieldItem flexRow">
                  <div class="flexRow">
                    <div class="flexCol-9">
                      <input type="radio" class="fieldItem" id="smtpNotificationsYes" name="smtp_notifications" value="true" /><label for="smtpNotificationsYes" class="radioLabel"><%= polyglot.t('Yes') %></label>
                      <input type="radio" class="fieldItem" id="smtpNotificationsNo" name="smtp_notifications" value="false" checked/><label for="smtpNotificationsNo" class="radioLabel"><%= polyglot.t('No') %></label>
                    </div>
                    <div class="positionTopRight paddingright5">
                      <a id="testSMTPButton" class="btn btn-txt js-testSMTP custCol-secondary">
                        <%= polyglot.t('TestSMTPButton') %>
                      </a>
                    </div>
                  </div>
                </div>
              </div>

            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight  custCol-border">
                <div class="fieldItem">
                  <label for="smtpServer">
                    <%= polyglot.t('SMTPServer') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="smtp_server"
                       id="smtpServer"
                       type="text"
                       placeholder="<%= polyglot.t('SMTPServerExample') %>"
                       class="fieldItem"
                       value="<%= ob.user.smtp_server %>">
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight  custCol-border">
                <div class="fieldItem">
                  <label for="smtpUsername">
                    <%= polyglot.t('SMTPUsername') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="smtp_username"
                       id="smtpUsername"
                       type="text"
                       class="fieldItem"
                       value="<%= ob.user.smtp_username %>">
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight  custCol-border">
                <div class="fieldItem">
                  <label for="smtpPassword">
                    <%= polyglot.t('SMTPPassword') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="smtp_password"
                       id="smtpPassword"
                       type="password"
                       class="fieldItem"
                       value="<%= ob.user.smtp_password %>">
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight  custCol-border">
                <div class="fieldItem">
                  <label for="smtpSender">
                    <%= polyglot.t('SMTPSender') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="smtp_sender"
                       id="smtpSender"
                       type="text"
                       placeholder="<%= polyglot.t('SMTPSenderExample') %>"
                       class="fieldItem"
                       value="<%= ob.user.smtp_sender %>">
              </div>
            </div>

            <div class="flexRow">

              <div class="flexCol-3  borderRight  custCol-border">
                <div class="fieldItem">
                  <label for="smtpRecipient">
                    <%= polyglot.t('SMTPRecipient') %>
                  </label>
                </div>
              </div>

              <div class="flexCol-9 borderRight0 custCol-border">
                <input name="smtp_recipient"
                       id="smtpRecipient"
                       type="text"
                       placeholder="<%= polyglot.t('SMTPRecipientExample') %>"
                       class="fieldItem"
                       value="<%= ob.user.smtp_recipient %>">
              </div>
            </div>

            <a class="btn btn-large js-saveAdvanced custCol-secondary pull-right marginRight15 marginTop15 marginBottom50 btn-secondary">
              <span class="ion-checkmark fontSize11 marginRight2 textOpacity1"></span>
              <%= polyglot.t('SaveChanges') %> (<%= config.keyShortcutPrefix + config.keyShortcuts.save.toUpperCase() %>)
            </a>
            <a class="btn btn-large js-cancelAdvanced custCol-secondary pull-right marginRight5 marginTop15 marginBottom50 btn-secondary width87px"><%= polyglot.t('Reset') %></a>
          </div>
        </form>

      </div>

    </div>
  </div>
  <div class="navBar custCol-secondary" style="padding: 4px 0"></div>
</div>
