{{#isLetterTemplate}}
  <div class="sp-choicetree-container" data-dynamic-choice-tree="root">
{{/isLetterTemplate}}
{{^isLetterTemplate}}
  <div class="sp-choicetree-container sp-choicetree-invert" data-dynamic-choice-tree="root">
{{/isLetterTemplate}}


  <div class="sp-choicetree-recap"
       data-dynamic-choice-tree="recap">
    {{#isNotModifyAction}}
    <p class="fr-sr-only rs_skip"
       tabindex="-1"
       data-dynamic-choice-tree="focus">
      Vous avez choisi
    </p>
    {{/isNotModifyAction}}
    {{#recapChoicesNodes.0}}
    <ul class="sp-choicetree-recap-list" data-id="sp-choicetree-recap-list">
      {{#recapChoicesNodes}}
      <li class="sp-choicetree-recap-item">
        <div class="sp-choicetree-recap-content">
          <span class="sp-choicetree-recap-icon fr-fi-check-line sp-blue" aria-hidden="true"></span>

          {{#isInComplement}}
            <h6 class="sp-choicetree-recap-title"
                id="recap-{{choiceTreeId}}-{{id}}"
                data-dynamic-tree="title">
              {{title}}
              {{{aideBloc}}}
            </h6>
          {{/isInComplement}}
          {{^isInComplement}}
            <h4 class="sp-choicetree-recap-title"
                id="recap-{{choiceTreeId}}-{{id}}"
                data-dynamic-tree="title">
              {{title}}
              {{{aideBloc}}}
            </h4>
          {{/isInComplement}}
          <button class="fr-btn sp-choicetree-recap-back rs_skip sp-no-print fr-btn--sm"
                  aria-describedby="recap-{{choiceTreeId}}-{{id}}"
                  type="button"
                  title="Modifier la sélection"
                  data-node-id="{{id}}"
                  data-dynamic-choice-tree="modify-action">
            <span>Modifier</span>
            <svg aria-hidden="true" focusable="false" class="sp-icon fr-ml-1w sp-icon-ri-arrow-go-back-line" viewBox="0 0 24 24" width="24" height="24">
              <path d="M5.828 7l2.536 2.536L6.95 10.95 2 6l4.95-4.95 1.414 1.414L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H5.828z"></path>
            </svg>
          </button>
        </div>
        {{#notice}}
        <div class="sp-choicetree-notice"
             data-dynamic-choice-tree="notice">
            {{{notice}}}
        </div>
        {{/notice}}
      </li>
      {{/recapChoicesNodes}}
    </ul>
    {{/recapChoicesNodes.0}}
  </div>

  <div class="sp-choicetree-to-select sp-no-print"
       data-dynamic-choice-tree="to-select">
    {{#notice}}
      <div class="sp-choicetree-notice"
           data-dynamic-choice-tree="notice">
        {{{notice}}}
      </div>
    {{/notice}}
      <p class="fr-sr-only rs_skip" data-dynamic-choice-tree="choisir-cas">Choisissez votre cas</p>
      <ul class="sp-choicetree-to-select-list sp-no-print">
        {{#toSelectChoicesNodes}}
        <li class="sp-choicetree-to-select-item">
          <button data-node-id="{{id}}"
                  class="sp-btn-like-radio"
                  type="button"
                  data-dynamic-choice-tree="select-action">
                <span class="sp-choicetree-to-select-title">
                    {{title}}
                </span>
          </button>
          {{{aideBloc}}}
        </li>
        {{/toSelectChoicesNodes}}
      </ul>
  </div>

  <div data-dynamic-choice-tree="print" class="sp-print-only sp-choicetree-print-tmp">
    {{{printableContent}}}
  </div>

  <div class="sp-choicetree-result"
       data-dynamic-choice-tree="result"
       data-test=choiceTreeResult>
    {{{content}}}
  </div>

</div>