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

<div
  class="helper-accordion js-helper-accordion"
  data-number="3"
  data-type="important"
>
  <div class="helper-header">
    <div class="helper-header-row">
      <h2 id="wizardCriteriaTitle" class="helper-title">
        {% translate wizard-criteria-title choose-your-wallet %}
      </h2>
      <div>{% translate wizard-optional choose-your-wallet %}</div>
      <div class="helper-selected-block">
        <div class="row">
          <div class="helper-selected-filter"></div>
          <button class="helper-change-btn js-helper-nav-btn" data-selector="3">
            {% translate helper-change-btn choose-your-wallet %}
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="helper-step">
    <div class="helper-checkboxes-row">
      <label class="checkbox-wrapper helper-checkbox-wrapper">
        <input
          type="checkbox"
          name="important"
          value="control"
          class="checkbox js-helper-checkbox js-wizard-selector js-selector"
        />
        <div class="checkbox-text helper-checkbox-text">
          <p class="helper-checkbox-title">
            {% translate wizard-criteria-control choose-your-wallet %}
          </p>
          <p class="disabled-checkbox-text">
            <span>{% translate helper-note choose-your-wallet %}:</span> {%
            translate helper-feature-unavailable choose-your-wallet %}
          </p>
          <p class="helper-checkbox-description">
            {% translate wizard-criteria-control-description choose-your-wallet
            %}
          </p>
        </div>
      </label>
      <label class="checkbox-wrapper helper-checkbox-wrapper">
        <input
          type="checkbox"
          name="important"
          value="validation"
          class="checkbox js-helper-checkbox js-wizard-selector js-selector"
        />
        <div class="checkbox-text helper-checkbox-text">
          <p class="helper-checkbox-title">
            {% translate wizard-criteria-validation choose-your-wallet %}
          </p>
          <p class="disabled-checkbox-text">
            <span>{% translate helper-note choose-your-wallet %}:</span> {%
            translate helper-feature-unavailable choose-your-wallet %}
          </p>
          <p class="helper-checkbox-description">
            {% translate wizard-criteria-validation-description
            choose-your-wallet %}
          </p>
        </div>
      </label>
      <label class="checkbox-wrapper helper-checkbox-wrapper">
        <input
          type="checkbox"
          name="important"
          value="transparency"
          class="checkbox js-helper-checkbox js-wizard-selector js-selector"
        />
        <div class="checkbox-text helper-checkbox-text">
          <p class="helper-checkbox-title">
            {% translate wizard-criteria-transparency choose-your-wallet %}
          </p>
          <p class="disabled-checkbox-text">
            <span>{% translate helper-note choose-your-wallet %}:</span> {%
            translate helper-feature-unavailable choose-your-wallet %}
          </p>
          <p class="helper-checkbox-description">
            {% translate wizard-criteria-transparency-description
            choose-your-wallet %}
          </p>
        </div>
      </label>
      <label class="checkbox-wrapper helper-checkbox-wrapper">
        <input
          type="checkbox"
          name="important"
          value="environment"
          class="checkbox js-helper-checkbox js-wizard-selector js-selector"
        />
        <div class="checkbox-text helper-checkbox-text">
          <p class="helper-checkbox-title">
            {% translate wizard-criteria-environment choose-your-wallet %}
          </p>
          <p class="disabled-checkbox-text">
            <span>{% translate helper-note choose-your-wallet %}:</span> {%
            translate helper-feature-unavailable choose-your-wallet %}
          </p>
          <p class="helper-checkbox-description">
            {% translate wizard-criteria-environment-description
            choose-your-wallet %}
          </p>
        </div>
      </label>
      <label class="checkbox-wrapper helper-checkbox-wrapper">
        <input
          type="checkbox"
          name="important"
          value="privacy"
          class="checkbox js-helper-checkbox js-wizard-selector js-selector"
        />
        <div class="checkbox-text helper-checkbox-text">
          <p class="helper-checkbox-title">
            {% translate wizard-criteria-privacy choose-your-wallet %}
          </p>
          <p class="disabled-checkbox-text">
            <span>{% translate helper-note choose-your-wallet %}:</span> {%
            translate helper-feature-unavailable choose-your-wallet %}
          </p>
          <p class="helper-checkbox-description">
            {% translate wizard-criteria-privacy-description choose-your-wallet
            %}
          </p>
        </div>
      </label>
      <label class="checkbox-wrapper helper-checkbox-wrapper">
        <input
          type="checkbox"
          name="important"
          value="fees"
          class="checkbox js-helper-checkbox js-wizard-selector js-selector"
        />
        <div class="checkbox-text helper-checkbox-text">
          <p class="helper-checkbox-title">
            {% translate wizard-criteria-fees choose-your-wallet %}
          </p>
          <p class="disabled-checkbox-text">
            <span>{% translate helper-note choose-your-wallet %}:</span> {%
            translate helper-feature-unavailable choose-your-wallet %}
          </p>
          <p class="helper-checkbox-description">
            {% translate wizard-criteria-fees-description choose-your-wallet %}
          </p>
        </div>
      </label>
    </div>
    <div class="helper-navigation">
      <button class="skip-helper-btn js-skip-btn">
        {% translate skip-helper-btn choose-your-wallet %}
      </button>
      <div class="helper-navigation-row">
        <button
          class="helper-next-btn btn-bright js-helper-nav-btn visible"
          data-selector="4"
        >
          {% translate helper-next-btn choose-your-wallet %}
        </button>
      </div>
    </div>
  </div>
</div>