<div class="homeModal-hero modal-hero modal-shadow-inner1 bg-dark-blue custCol-primary-darken">
  <div class="modal-hero-icon"></div>
  <p class="h6 homeModal-heroText fancy-heading"><%= polyglot.t('Welcome') %></p>
</div>
<div class="homeModal-accordion accordion js-profileAccordion">
  <div class="accordion-window">
    <div class="accordion-child accordion-active custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.chooseLanguage') %>
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 1, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer" id="homeModal-languageList">
        <div class="flexRow">
          <div class="txtFieldWrapper txtFieldWrapper-bar searchWrapper  custCol-border">
            <input type="text" autofocus="autofocus" class="txtField txtField-bar search custCol-primary custCol-border custCol-text" placeholder="<%= polyglot.t('onboarding.LanguagePlaceholder') %>" />
          </div>
        </div>
        <div class="js-homeModal-languageList js-homeModal-listParent flex-border"></div>
      </div>
      <div class="bar barFlush">
        <a class="btn btn-bar btn-wide js-accordionNext custCol-secondary borderBottomLeftRaidus3 borderBottomRightRaidus3 custCol-text" tabIndex="0">
          <%= polyglot.t('Next') %>
          <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
        </a>
      </div>
    </div>

    <div class="accordion-child accordion-inactive custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.Introduction') %>
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 2, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer homeModal-settings homeModal-settings-noSearch custCol-primary">
        <div class="flexRow flexRow-center positionWrapper">
          <div class="rowItem padding20">
            <p class="margin0 fontSize15 lineHeight20 fontWeight400 custCol-text alignCenter"><%= polyglot.t('onboarding.IntroductionBody') %></p>
          </div>
        </div>
      </div>
      <div class="bar barFlush borderBottomLeftRaidus3 borderBottomRightRaidus3">
        <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
          <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
          <%= polyglot.t('Back') %>
        </a>
        <a class="btn btn-bar btn-half js-accordionNext custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
          <%= polyglot.t('Next') %>
          <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
        </a>
      </div>
    </div>

    <div class="accordion-child accordion-inactive custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.yourCountry') %>
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 3, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer custCol-primary" id="homeModal-countryList">
        <div class="flexRow">
          <div class="txtFieldWrapper txtFieldWrapper-bar searchWrapper custCol-border">
            <input type="text" class="txtField txtField-bar search custCol-primary custCol-border custCol-text" placeholder="<%= polyglot.t('onboarding.CountryPlaceholder') %>" />
          </div>
        </div>
        <div class="js-homeModal-countryList js-homeModal-listParent flex-border"></div>
        <div class="bar barFlush borderBottomLeftRaidus3 borderBottomRightRaidus3">
          <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
            <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
            <%= polyglot.t('Back') %>
          </a>
          <a class="btn btn-bar btn-half js-accordionNext custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
            <%= polyglot.t('Next') %>
            <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="accordion-child accordion-inactive custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.localCurrency') %>
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 4, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer" id="homeModal-currencyList">
        <div class="flexRow">
          <div class="txtFieldWrapper txtFieldWrapper-bar searchWrapper custCol-border">
            <input type="text" class="txtField txtField-bar search custCol-primary custCol-border custCol-text" placeholder="<%= polyglot.t('onboarding.CurrencyPlaceholder') %>" />
          </div>
        </div>
        <div class="js-homeModal-currencyList js-homeModal-listParent flex-border"></div>
        <div class="bar barFlush borderBottomLeftRaidus3 borderBottomRightRaidus3">
          <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
            <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
            <%= polyglot.t('Back') %>
          </a>
          <a class="btn btn-bar btn-half js-accordionNext custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
            <%= polyglot.t('Next') %>
            <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="accordion-child accordion-inactive custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.yourDetails') %> (<%= polyglot.t('Optional') %>)
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 5, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer flex-border homeModal-settings homeModal-settings-noSearch custCol-primary custCol-text">
        <div class="flexRow">
          <div class="txtFieldWrapper txtFieldWrapper-bar hide">
            <input type="text" class="txtField txtField-bar js-homeModal-handleInput custCol-text" placeholder="Choose Handle" />
          </div>
        </div>
        <div>
          <div class="flexRow marginTop1">
            <div class="flexRow borderBottom custCol-border">
              <div class="flexCol-3 borderRight custCol-border">
                <label class="fieldItem" for="storeNameInput">
                  <%= polyglot.t('Name') %>
                </label>
              </div>
              <div class="flexCol-9">
                <input name="name"
                       id="storeNameInput"
                       type="text"
                       class="fieldItem custCol-text"
                       placeholder="<%= polyglot.t('YourName') %>"
                       required>
              </div>
            </div>
            <div class="flexRow borderBottom custCol-border">
              <div class="flexCol-3 borderRight custCol-border">
                <label class="fieldItem" for="aboutInput">
                  <%= polyglot.t('ShortDescription') %>
                </label>
              </div>
              <div class="flexCol-9">
                <textarea name="short_description"
                          rows="3"
                          maxlength="160"
                          id="aboutInput"
                          class="fieldItem-textarea custCol-text customThemeScrollbar"
                          placeholder="<%= polyglot.t('ShortDescriptionPlaceholder') %>"></textarea>
              </div>
            </div>
            <div class="flexRow borderBottom custCol-border">
              <div class="flexCol-3 borderRight custCol-border">
                <label class="fieldItem" for="aboutInput">
                  <%= polyglot.t('DisplayNSFWcontent') %>
                </label>
              </div>
              <div class="flexCol-9">
                <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>
          </div>
        </div>
      </div>
      <div class="bar barFlush borderBottomLeftRaidus3 borderBottomRightRaidus3">
        <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
          <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
          <%= polyglot.t('Back') %>
        </a>
        <a class="btn btn-bar btn-half js-accordionNext custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
          <%= polyglot.t('Next') %>
          <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
        </a>
      </div>
    </div>

    <div class="accordion-child accordion-inactive custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('Theme') %>
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 6, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer homeModal-settings homeModal-settings-noSearch custCol-primary customThemeScrollbar">
        <div class="flexRow">
          <div class="theme-container clearfix custCol-border borderRight borderBottom">
            <input type="radio" name="theme-selection" class="fieldItem marginBottom20" id="theme-1"
                   data-primary-color="#ba4a3f"
                   data-secondary-color="#cc504b"
                   data-background-color="#5E3E36"
                   data-text-color="#ffffff"
                   data-header="imgs/themes/1/header.png" />
            <label for="theme-1" class="js-homeModal-themeSelected 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="theme-selection" class="fieldItem marginBottom20" id="theme-2"
                   data-primary-color="#ffffff"
                   data-secondary-color="#E6E6E6"
                   data-background-color="#B2B2B2"
                   data-text-color="#000000"
                   data-header="imgs/themes/2/header.png"/>
            <label for="theme-2" class="js-homeModal-themeSelected 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="theme-selection" class="fieldItem marginBottom20" id="theme-3"
                   data-primary-color="#474559"
                   data-secondary-color="#353443"
                   data-background-color="#1d1d25"
                   data-text-color="#ffffff"
                   data-header="imgs/themes/3/header.png" />
            <label for="theme-3" class="js-homeModal-themeSelected 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 borderBottom">
            <input type="radio" name="theme-selection" class="fieldItem marginBottom20" id="theme-4"
                   data-primary-color="#929e8e"
                   data-secondary-color="#6e776b"
                   data-background-color="#3d413b"
                   data-text-color="#ffffff"
                   data-header="imgs/themes/4/header.png" />
            <label for="theme-4" class="js-homeModal-themeSelected 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 borderBottom">
            <input type="radio" name="theme-selection" class="fieldItem marginBottom20" id="theme-5"
                   data-primary-color="#41658a"
                   data-secondary-color="#334e6a"
                   data-background-color="#1c2b3a"
                   data-text-color="#ffffff"
                   data-header="imgs/themes/5/header.png" />
            <label for="theme-5" class="js-homeModal-themeSelected 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 borderBottom">
            <input type="radio" name="theme-selection" class="fieldItem marginBottom20" id="theme-6"
                   data-primary-color="#252525"
                   data-secondary-color="#1B1B1B"
                   data-background-color="#141414"
                   data-text-color="#ffffff"
                   data-header="imgs/themes/6/header.png" />
            <label for="theme-6" class="js-homeModal-themeSelected 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 class="bar barFlush borderBottomLeftRaidus3 borderBottomRightRaidus3">
        <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
          <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
          <%= polyglot.t('Back') %>
        </a>
        <a class="btn btn-bar btn-half js-accordionNext custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
          <%= polyglot.t('Next') %>
          <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
        </a>
      </div>
    </div>

    <div class="accordion-child accordion-inactive custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.avatar') %> (<%= polyglot.t('Optional') %>)
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 7, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer homeModal-settings homeModal-settings-noSearch custCol-primary">
        <div class="flexRow flexRow-center positionWrapper">
          <div id="image-cropper" class="positionWrapper">
            <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-onboardingAvatarPreview rowTop10 thumbnail thumbnail-huge border1 row10"></div>
            <div>
              <input type="range" class="cropit-image-zoom-input rowTop10 row10 width100 hide" />
            </div>
            <input type="file" id="onboardingAvatarInput" class="cropit-image-input hide" />
            <label for="onboardingAvatarInput" class="btn btn-txt btn-c1 btn-wide rowTop10 row20"><%= polyglot.t('UploadAvatar') %></label>
          </div>
        </div>
      </div>
      <div class="bar barFlush borderBottomLeftRaidus3 borderBottomRightRaidus3">
        <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
          <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
          <%= polyglot.t('Back') %>
        </a>
        <a class="btn btn-bar btn-half js-accordionNext custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
          <%= polyglot.t('Next') %>
          <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
        </a>
      </div>
    </div>

    <div class="accordion-child accordion-inactive custCol-primary js-followHandles">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.recommended') %> (<%= polyglot.t('Optional') %>)
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 8, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer homeModal-settings homeModal-settings-noSearch custCol-primary customThemeScrollbar">
        <div class="flexRow">
          <ul class="width100 padding0 margin0 custCol-text customThemeScrollbar">


            <li class="rowItem paddingLeft5 paddingTop20 paddingBottom20 borderBottom custCol-border">
              <input class="fieldItem pull-left marginTop12" type="checkbox" id="a06aa22a38f0e62221ab74464c311bd88305f88c" data-handle="openbazaar" checked />
              <label for="a06aa22a38f0e62221ab74464c311bd88305f88c" class="textOpacity1 checkboxLabel">
                <div class="pull-left marginRight10">
                  <div class="thumbnail pull-left" style="background-image: url(imgs/openbazaar-icon-no-border.png);"></div>
                </div>
                <div class="pull-left marginTop6 marginLeft2 marginRight5 fontSize16 width360">
                  <div class="marginBottom2">
                    OpenBazaar
                    <span class="fontSize15 textOpacity50">@openbazaar</span>
                  </div>
                  <span class="fontSize14 textOpacity75">The offical OpenBazaar page and merch store.</span>
                </div>
              </label>
            </li>

            <li class="rowItem paddingLeft5 paddingTop20 paddingBottom20 borderBottom custCol-border">
              <input class="fieldItem pull-left marginTop12" type="checkbox" id="bbb75ac9028dd8aca7acb236b5dd7c4dfd9b5bc8" data-handle="themes" checked />
              <label for="bbb75ac9028dd8aca7acb236b5dd7c4dfd9b5bc8" class="textOpacity1 checkboxLabel">
                <div class="pull-left marginRight10">
                  <div class="thumbnail pull-left" style="background-image: url(imgs/themes-icon.png);"></div>
                </div>
                <div class="pull-left marginTop6 marginLeft2 marginRight5 fontSize16 width360">
                  <div class="marginBottom2">
                    Themes
                    <span class="fontSize15 textOpacity50">@themes</span>
                  </div>
                  <span class="fontSize14 textOpacity75">Additional themes for your OpenBazaar page.</span>
                </div>
              </label>
            </li>

            <li class="rowItem paddingLeft5 paddingTop20 paddingBottom20 borderBottom custCol-border">
              <input class="fieldItem pull-left marginTop12" type="checkbox" id="replacewithob1guid" data-handle="ob1" checked />
              <label for="replacewithob1guid" class="textOpacity1 checkboxLabel">
                <div class="pull-left marginRight10">
                  <div class="thumbnail pull-left" style="background-image: url(imgs/ob1-icon.png);"></div>
                </div>
                <div class="pull-left marginTop6 marginLeft2 marginRight5 fontSize16 width360">
                  <div class="marginBottom2">
                    OB1
                    <span class="fontSize15 textOpacity50">@ob1</span>
                  </div>
                  <span class="fontSize14 textOpacity75">The first OpenBazaar company.</span>
                </div>
              </label>
            </li>

            <li class="rowItem paddingLeft5 paddingTop20 paddingBottom20 borderBottom custCol-border">
              <input class="fieldItem pull-left marginTop12" type="checkbox" id="e1c6340228691a6fe97d3acee4b2517db412e1a2" data-handle="helpdesk" checked />
              <label for="e1c6340228691a6fe97d3acee4b2517db412e1a2" class="textOpacity1 checkboxLabel">
                <div class="pull-left marginRight10">
                  <div class="thumbnail pull-left" style="background-image: url(imgs/helpdesk-icon.png);"></div>
                </div>
                <div class="pull-left marginTop6 marginLeft2 marginRight5 fontSize16 width360">
                  <div class="marginBottom2">
                    Helpdesk
                    <span class="fontSize15 textOpacity50">@helpdesk</span>
                  </div>
                  <span class="fontSize14 textOpacity75">Ask questions about OpenBazaar. Anything goes!</span>
                </div>
              </label>
            </li>
          </ul>
        </div>
      </div>
      <div class="bar barFlush custCol-secondary borderBottomLeftRaidus3 borderBottomRightRaidus3">
        <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
          <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
          <%= polyglot.t('Back') %>
        </a>
        <a class="btn btn-bar btn-half js-accordionNext custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
          <%= polyglot.t('Next') %>
          <span class="ion-chevron-right fontSize10 marginLeft2 textOpacity75"></span>
        </a>
      </div>
    </div>

    <div class="accordion-child accordion-inactive custCol-primary">
      <div class="bar barTxt h6 custCol-secondary custCol-text">
        <%= polyglot.t('onboarding.disclaimer_title') %>
        <span class="textOpacity75 fontSize14 floatRight"><%= polyglot.t('pageXofY', {currentPage: 9, totalPages: 9}) %></span>
      </div>
      <div class="flexContainer homeModal-settings customThemeScrollbar homeModal-settings-noSearch custCol-primary">
        <div class="flexRow">
          <div class="rowItem padding20">
            <p class="margin0 fontSize15 lineHeight20 fontWeight400 custCol-text"><%= polyglot.t('onboarding.disclaimer_body') %></p>
          </div>
        </div>
      </div>
      <div class="bar barFlush custCol-secondary borderBottomLeftRaidus3 borderBottomRightRaidus3">
        <a class="btn btn-bar btn-half js-accordionPrev custCol-secondary custCol-border-primary borderBottomLeftRaidus3 custCol-text borderRight" tabIndex="0">
          <span class="ion-chevron-left fontSize10 marginRight2 textOpacity75"></span>
          <%= polyglot.t('Back') %>
        </a>
        <a class="btn btn-bar btn-half js-homeModalDone custCol-secondary custCol-border-primary borderBottomRightRaidus3 custCol-text" tabIndex="0">
          <span class="ion-checkmark fontSize10 marginRight2 textOpacity75"></span>
          <%= polyglot.t('IAgree') %>
        </a>
      </div>
    </div>

  </div>
</div>
