{% comment %}
This file is licensed under the MIT License (MIT) available on
http://opensource.org/licenses/MIT.
{% endcomment %}

<div class="wallet-selector choose-wallet-screen" data-number="5" data-screen-name="selector">
  <div class="container">

    <div class="wallet-selector-row">
      <button id="sidebarOpenButton" class="sidebar-selector-btn-open">{% translate wallet-selector-filters choose-your-wallet %}</button>
      <div id="sidebarSelector" class="sidebar-selector">
        <button id="sidebarCloseButton" class="sidebar-selector-btn-close">
          <img src="/img/icons/close-selector.svg" alt="Close">
        </button>
        <div class="sidebar-selector-section">
          <h3 id="sidebarOsSelectorTitle" class="sidebar-selector-title">{% translate wallet-selector-operating-system choose-your-wallet %}</h3>
          <div class="sidebar-selector-platforms">
            <div class="sidebar-selector-platforms-row">
              <div class="sidebar-selector-platform">
                <div class="sidebar-selector-label-row">
                  <h3 id="sidebarMobileSelectorTitle" class="sidebar-selector-label">{% translate walletcatmobile choose-your-wallet %}</h3>
                  <div class="tooltip-trigger">
                    <img src="/img/icons/info-alt.svg" alt="info">
                    <div class="wallet-selector-tooltip tooltip">
                      {% translate walletcatmobile-description choose-your-wallet %}
                    </div>
                  </div>
                </div>
                <div class="sidebar-selector-os-row">
                  <label class="platform-radio-wrapper">
                    <input type="radio" class="platform-radio js-platform-radio js-wallet-selector js-selector" name="platform" value="android" data-path="/{{page.lang}}/wallets/mobile/android"/>
                    <div class="platform-radio-custom">
                      <img src="/img/os/wallet_menu_android.svg" alt="android" class="platform-radio-icon-inactive">
                      <img src="/img/os/wallet_menu_android_bright.svg" alt="android" class="platform-radio-icon-active">
                    </div>
                  </label>
                  <label class="platform-radio-wrapper">
                    <input type="radio" class="platform-radio js-platform-radio js-wallet-selector js-selector" name="platform" value="ios" data-path="/{{page.lang}}/wallets/mobile/ios/" />
                    <div class="platform-radio-custom">
                      <img src="/img/os/wallet_menu_mac.svg" alt="ios" class="platform-radio-icon-inactive">
                      <img src="/img/os/wallet_menu_mac_bright.svg" alt="ios" class="platform-radio-icon-active">
                    </div>
                  </label>
                </div>
              </div>
              <div class="sidebar-selector-platform sidebar-desktop-platform">
                <div class="sidebar-selector-label-row">
                  <h3 id="sidebarDesktopSelectorTitle" class="sidebar-selector-label">{% translate walletcatdesktop choose-your-wallet %}</h3>
                  <div class="tooltip-trigger">
                    <img src="/img/icons/info-alt.svg" alt="info">
                    <div class="wallet-selector-tooltip tooltip">
                      {% translate walletcatdesktop-description choose-your-wallet %}
                    </div>
                  </div>
                </div>
                <div class="sidebar-selector-os-row">
                  <label class="platform-radio-wrapper">
                    <input type="radio" class="platform-radio js-platform-radio js-wallet-selector js-selector" name="platform" value="linux" data-path="/{{page.lang}}/wallets/desktop/linux/" />
                    <div class="platform-radio-custom">
                      <img src="/img/os/wallet_menu_linux.svg" alt="linux" class="platform-radio-icon-inactive">
                      <img src="/img/os/wallet_menu_linux_bright.svg" alt="linux" class="platform-radio-icon-active">
                    </div>
                  </label>
                  <label class="platform-radio-wrapper">
                    <input type="radio" class="platform-radio js-platform-radio js-wallet-selector js-selector" name="platform" value="mac" data-path="/{{page.lang}}/wallets/desktop/mac/"/>
                    <div class="platform-radio-custom">
                      <img src="/img/os/wallet_menu_mac.svg" alt="mac" class="platform-radio-icon-inactive">
                      <img src="/img/os/wallet_menu_mac_bright.svg" alt="mac" class="platform-radio-icon-active">
                    </div>
                  </label>
                  <label class="platform-radio-wrapper">
                    <input type="radio" class="platform-radio js-platform-radio js-wallet-selector js-selector" name="platform" value="windows" data-path="/{{page.lang}}/wallets/desktop/windows/"/>
                    <div class="platform-radio-custom">
                      <img src="/img/os/wallet_menu_windows.svg" alt="windows" class="platform-radio-icon-inactive">
                      <img src="/img/os/wallet_menu_windows_bright.svg" alt="windows" class="platform-radio-icon-active">
                    </div>
                  </label>
                </div>
              </div>
            </div>
            <div class="sidebar-selector-platforms-row">
              <div class="sidebar-selector-platform sidebar-hardware-platform">
                <div class="sidebar-selector-label-row">
                  <h3 id="sidebarHardwareSelectorTitle" class="sidebar-selector-label">{% translate walletcathardware choose-your-wallet %}</h3>
                  <div class="tooltip-trigger">
                    <img src="/img/icons/info-alt.svg" alt="info">
                    <div class="wallet-selector-tooltip tooltip">
                      {% translate walletcathardware-description choose-your-wallet %}
                    </div>
                  </div>
                </div>
                <div class="sidebar-selector-os-row">
                  <label class="platform-radio-wrapper">
                    <input type="radio" class="platform-radio js-platform-radio js-wallet-selector js-selector" name="platform" value="hardware" data-path="/{{page.lang}}/wallets/hardware/"/>
                    <div class="platform-radio-custom">
                      <img src="/img/os/wallet_menu_hardware.svg" alt="hardware" class="platform-radio-icon-inactive">
                      <img src="/img/os/wallet_menu_hardware_bright.svg" alt="hardware" class="platform-radio-icon-active">
                    </div>
                  </label>
                </div>
              </div>
              <!-- There are currently no web wallets on bitcoin.org; this section has been commented out to prevent it from displaying. 

              <div class="sidebar-selector-platform sidebar-web-platform">
                <div class="sidebar-selector-label-row">
                  <h3 id="sidebarWebSelectorTitle" class="sidebar-selector-label">{% translate walletcatweb choose-your-wallet %}</h3>
                  <div class="sidebar-selector-info tooltip-trigger">
                    <img src="/img/icons/info-alt.svg" alt="info">
                    <div class="wallet-selector-tooltip tooltip">
                      {% translate walletcatweb-description choose-your-wallet %}
                    </div>
                  </div>
                </div>
                <div class="sidebar-selector-os-row">
                  <label class="platform-radio-wrapper">
                    <input type="radio" class="platform-radio js-platform-radio js-wallet-selector js-selector" name="platform" value="web" data-path="/{{page.lang}}/wallets/web/" />
                    <div class="platform-radio-custom">
                      <img src="/img/os/wallet_menu_web.svg" alt="web" class="platform-radio-icon-inactive">
                      <img src="/img/os/wallet_menu_web_bright.svg" alt="web" class="platform-radio-icon-active">
                    </div>
                  </label>
                </div>
              </div>

              -->
            </div>
          </div>
        </div>
        <div class="sidebar-selector-section">
          <h3 id="sidebarHardwareSelector" class="sidebar-selector-title">{% translate wallet-selector-user-type choose-your-wallet %}</h3>

          <div class="sidebar-selector-types-row">
            <div class="user-radio-row">
              <label class="user-radio-wrapper">
                <input type="radio" class="user-radio js-wallet-selector js-selector" name="user" value="beginner"  />
                <p class="user-radio-text">{% translate wizard-user-new choose-your-wallet %}</p>
              </label>
              <div class="sidebar-selector-info">
                <p class="sidebar-selector-info-text">Not available</p>
                <div class="tooltip-trigger">
                  <img src="/img/icons/info-alt.svg" alt="info">
                  <div class="wallet-selector-tooltip tooltip">
                    {% translate wizard-user-new-description-search choose-your-wallet %}
                  </div>
                </div>
              </div>
            </div>
            <div class="user-radio-row">
              <label class="user-radio-wrapper">
                <input type="radio" class="user-radio js-wallet-selector js-selector" name="user" value="experienced" />
                <p class="user-radio-text">{% translate wizard-user-experienced choose-your-wallet %}</p>
              </label>
              <div class="sidebar-selector-info">
                <p class="sidebar-selector-info-text">Not available</p>
                <div class="tooltip-trigger">
                  <img src="/img/icons/info-alt.svg" alt="info">
                  <div class="wallet-selector-tooltip tooltip">
                    {% translate wizard-user-experienced-description-search choose-your-wallet %}
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="sidebar-checkboxes-row">
          <div class="sidebar-selector-section">
            <div class="sidebar-selector-section-top">
              <h3 id="sidebarCriteriaSelectorTitle" class="sidebar-selector-title">{% translate wallet-selector-criteria choose-your-wallet %}</h3>
            </div>
            <div class="checkboxes-acc">
              <div class="checkboxes-acc-header">
                <div id="importantSelectedBox" class="checkboxes-acc-selected-list"></div>
                <button id="importantAccordionButton" class="checkboxes-acc-btn">
                  <img src="/img/icons/angle.svg" alt="angle">
                </button>
              </div>
              <div class="checkboxes-acc-content">
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="important" value="control" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-criteria-control choose-your-wallet %}</div>
                  </label>
                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-criteria-control-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="important" value="validation" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-criteria-validation choose-your-wallet %}</div>
                  </label>
                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-criteria-validation-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="important" value="transparency" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-criteria-transparency choose-your-wallet %}</div>
                  </label>
                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-criteria-transparency-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="important" value="environment" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-criteria-environment choose-your-wallet %}</div>
                  </label>
                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-criteria-environment-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="important" value="privacy" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-criteria-privacy choose-your-wallet %}</div>
                  </label>
                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-criteria-privacy-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="important" value="fees" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-criteria-fees choose-your-wallet %}</div>
                  </label>
                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-criteria-fees-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sidebar-selector-section features-selectors-section">
            <div class="sidebar-selector-section-top">
              <h3 id="sidebarFeaturesSelectorTitle" class="sidebar-selector-title">{% translate wallet-selector-features choose-your-wallet %}</h3>
            </div>
            <div class="checkboxes-acc">
              <div class="checkboxes-acc-header">
                <div id="featuresSelectedBox" class="checkboxes-acc-selected-list"></div>
                <button class="checkboxes-acc-btn">
                  <img src="/img/icons/angle.svg" alt="angle">
                </button>
              </div>
              <div class="checkboxes-acc-content">
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="2fa" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-2fa choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-2fa-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>

                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="bech32" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-bech32 choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-bech32-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>

                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="full_node" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-full_node choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-full_node-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                  
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="hardware_wallet" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-hardware_wallet choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-hardware_wallet-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>

                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="legacy_addresses" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-legacy_addresses choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-legacy_addresses-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                  
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="lightning" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-lightning choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-lightning-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                  
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="multisig" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-multisig choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-multisig-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                
                </div>
                <div class="important-checkbox-row">
                  <label class="checkbox-wrapper">
                    <input type="checkbox" name="features" value="segwit" class="checkbox js-wallet-selector js-selector" />
                    <div class="checkbox-text">{% translate wizard-feature-segwit choose-your-wallet %}</div>
                  </label>

                  <div class="sidebar-selector-info">
                    <p class="sidebar-selector-info-text">Not available</p>
                    <div class="tooltip-trigger">
                      <img src="/img/icons/info-alt.svg" alt="info">
                      <div class="wallet-selector-tooltip tooltip">
                        {% translate wizard-feature-segwit-description choose-your-wallet %}
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="wallet-selector-content">

        <div class="wallet-table-wrapper wallet-selector-section" data-section-name="walletsList">

          <h2 id="walletTableTitle" class="wallet-selector-title">{% translate wallet-selector-results choose-your-wallet %}</h2>

          <div class="table-sort">
            <h3 id="walletTableSortTitle" class="table-sort-title">{% translate wallet-selector-sort choose-your-wallet %}:</h3>
            <div id="tableAccordion" class="acc">
              <button id="tableAccordionButton" class="acc-btn">{% translate wizard-criteria-control choose-your-wallet %}</button>
              <div class="acc-content">
                <button class="acc-content-btn table-sort-btn" data-sort="control">{% translate wizard-criteria-control choose-your-wallet %}</button>
                <button class="acc-content-btn table-sort-btn" data-sort="validation">{% translate wizard-criteria-validation choose-your-wallet %}</button>
                <button class="acc-content-btn table-sort-btn" data-sort="transparency">{% translate wizard-criteria-transparency choose-your-wallet %}</button>
                <button class="acc-content-btn table-sort-btn" data-sort="environment">{% translate wizard-criteria-environment choose-your-wallet %}</button>
                <button class="acc-content-btn table-sort-btn" data-sort="privacy">{% translate wizard-criteria-privacy choose-your-wallet %}</button>
                <button class="acc-content-btn table-sort-btn" data-sort="fees">{% translate wizard-criteria-fees choose-your-wallet %}</button>
              </div>
            </div>
          </div>

          <div class="wallet-table">
            <div class="wallet-table-row">
              <div class="wallet-table-head">
                <p class="wallet-table-title"><span id="selectedOs"></span> {% translate wallet-selector-results-wallets choose-your-wallet %}</p>
              </div>
              <div class="wallet-table-head">
                <p class="wallet-table-title">{% translate wizard-criteria-control choose-your-wallet %}</p>
              </div>
              <div class="wallet-table-head">
                <p class="wallet-table-title">{% translate wizard-criteria-validation choose-your-wallet %}</p>
              </div>
              <div class="wallet-table-head">
                <p class="wallet-table-title">{% translate wizard-criteria-transparency choose-your-wallet %}</p>
              </div>
              <div class="wallet-table-head">
                <p class="wallet-table-title">{% translate wizard-criteria-environment choose-your-wallet %}</p>
              </div>
              <div class="wallet-table-head">
                <p class="wallet-table-title">{% translate wizard-criteria-privacy choose-your-wallet %}</p>
              </div>
              <div class="wallet-table-head">
                <p class="wallet-table-title">{% translate wizard-criteria-fees choose-your-wallet %}</p>
              </div>
            </div>

            {% for wallet in site.wallets %}
              {% assign id = wallet.id | remove: '/wallets/' %}
              {% for platform in wallet.platform %}
                {% for os in platform.os %}
                  <a
                    href="{% if platform.name == os.name %}/{{page.lang}}/wallets/{{platform.name}}/{{id}}/{% else %}/{{page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{id}}/{% endif %}"
                    class="wallet-table-row wallet-link"
                    data-categories="{% if wallet.user %}{{wallet.user}}{% endif %} experienced {% for check in os.check %}{% assign checkValue = check[1] %}{% assign checkName = check[0] %}{% if checkValue contains 'checkgood' %}{{checkName}} {% endif %}{% if platform.name == 'hardware' and checkValue contains 'checkneutral' %}{{checkName}} {% endif %}{% endfor %}{{os.name}} {{os.features}}"
                  >
                    <div class="wallet-table-data">
                      <img class="wallet-img" src="/img/wallet/{{id}}.png" alt="{{ wallet.title }}" />
                      <span class="wallet-label">{{wallet.titleshort}}</span>
                    </div>
                    {% for check in os.check %}
                      {% assign checkName = check[0] %}
                      {% assign checkValue = check[1] %}
                      <div class="wallet-table-data" data-cell="{{checkName}}">
                        <div class="wallet-score-wrapper">
                          {% if checkValue contains 'checkgood' %}
                            <span class="wallet-table-text">{% translate wallet-scoring-good choose-your-wallet %}</span>
                            <div class="wallet-score wallet-good"></div>
                          {% elsif checkValue contains 'checkpass' %}
                            <span class="wallet-table-text">{% translate wallet-scoring-pass choose-your-wallet %}</span>
                            <div class="wallet-score wallet-pass"></div>
                          {% elsif checkValue contains 'checkfail' %}
                            <span class="wallet-table-text">{% translate wallet-scoring-fail choose-your-wallet %}</span>
                            <div class="wallet-score wallet-caution"></div>
                          {% elsif checkValue contains 'checkneutral' %}
                            <span class="wallet-table-text">{% translate wallet-scoring-neutral choose-your-wallet %}</span>
                            <div class="wallet-score wallet-neutral"></div>
                          {% endif %}
                        </div>
                      </div>
                    {% endfor %}
                  </a>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </div>

          <div class="wallet-hints-row">
            <div class="wallet-hint">
              <div class="wallet-good"></div>
              <p class="wallet-hint-text">{% translate wallet-scoring-good choose-your-wallet %}</p>
            </div>
            <div class="wallet-hint">
              <div class="wallet-pass"></div>
              <p class="wallet-hint-text">{% translate wallet-scoring-pass choose-your-wallet %}</p>
            </div>
            <div class="wallet-hint">
              <div class="wallet-caution"></div>
              <p class="wallet-hint-text">{% translate wallet-scoring-fail choose-your-wallet %}</p>
            </div>
            <div class="wallet-hint">
              <div class="wallet-neutral"></div>
              <p class="wallet-hint-text">{% translate wallet-scoring-neutral choose-your-wallet %}</p>
            </div>
          </div>

        </div>

        <div class="wallet-selector-section empty-box" data-section-name="noMatch">
          <img src="/img/icons/empty.svg" alt="wallet with magnifier">
          <h2 id="noMatchBoxTitle" class="empty-box-title">{% translate wallet-selector-results-no-match choose-your-wallet %}</h2>
          <p class="empty-box-text">{% translate wallet-selector-results-no-match-cta choose-your-wallet %}</p>
        </div>

        <div class="wallet-selector-section empty-box" data-section-name="browseWallets">
          <img src="/img/icons/empty.svg" alt="wallet with magnifier">
          <h2 id="browseBoxTitle" class="empty-box-title">{% translate wallet-selector-browse choose-your-wallet %}</h2>
          <p class="empty-box-text">{% translate wallet-selector-browse-cta choose-your-wallet %}</p>
        </div>
      </div>

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