<div class="component__inner matching__inner mr_wrapper_container">

  <div class="mcq">

    <div class="row">
      <div class="col-9">
        <div class="row">
          <div class="col-8">
            <div class="question-container">
              <div class="title-container">
                {{{compile displayTitle}}}
              </div>
              <div class="question_title">
                {{body}}
              </div>
            </div>
          </div>
          <div class="col-4">
            <div class="image-container">
              <img src="{{img}}" alt="{{imgalt}}">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row content pos-rel">
      <div class="col-8 col-100">
        {{!-- {{> component this}} --}}

        <div class="row">
          <div class="col-9">
            <div class="option_instuction">
              {{instruction}}
            </div>
          </div>
          <div class="col-3 d-flex option-labels">
            <div class="col-6">
              {{option.trueTitle}}
            </div>
            <div class="col-6">
              {{option.falseTitle}}
            </div>
          </div>
        </div>

        <div
          class="component__widget matching__widget{{#unless _isEnabled}} is-disabled{{#if _isInteractionComplete}} is-complete is-submitted show-user-answer{{#if _isCorrect}} is-correct{{/if}}{{/if}}{{/unless}}">

          {{#each _items as |optValue optKey|}}
          <div
            class="matching__item mcq__item-label mcq__item item item-{{@index}}{{#unless ../_isEnabled}}{{#if ../_canShowMarking}}{{#if _isCorrect}} is-correct{{else}} is-incorrect{{/if}}{{/if}}{{/unless}}">

            <div class="row">
              <div class="col-9">
                {{#if text}}
                <div class="matching__item-title mcq__item-text">
                  <div class="matching__item-title_inner">
                    {{{text}}}
                    <span class="mcq__option_text">{{_option_text}}</span>
                  </div>
                </div>
                {{/if}}
              </div>
              <div class="col-3 d-flex opt-radio">
                {{#each _options as |childValue childKey|}}
                <div class="col-6">
                  
                  <div class="opt">
                    <input type="radio" data-parent-index="{{optKey}}" data-index="{{childKey}}" value="{{childValue.text}}" name="opt-{{optKey}}-{{../../_id}}" id="opt-{{childKey}}-{{../../_id}}">
                    <span></span>
                  </div>
                  <span>{{childValue.text}}</span>
                </div>
                {{/each}}
                {{!-- <div class="col-6">
                  <div class="opt">
                    <input type="radio" data-index="{{@index}}" value="{{}}" name="opt-{{@index}}-{{../_id}}" id="opt-{{@index}}-{{../_id}}">
                    <span></span>
                  </div>
                </div> --}}
              </div>
            </div>



            <div class="matching__select-container">

              {{> dropdown this placeholder=../placeholder _id=../_id _dropdownIndex=@index}}

              <div class="matching__select-state">
                <div class="matching__select-icon matching__select-correct-icon">
                  <div class="icon"></div>
                </div>
                <div class="matching__select-icon matching__select-incorrect-icon">
                  <div class="icon"></div>
                </div>
              </div>

            </div>

          </div>
          {{/each}}

        </div>
      </div>
      <div class="col-4 col-100 d-flex dir-col j-flex-end">
        <div class="support-container">
          <div class="support-popup-container" style="display: none;">
            <div class="support-inner-container">
              <div class="support-heading">
                <span class="close-support"></span>
                {{#if supportHeading}}
                <h5>{{supportHeading}}</h5>
                {{/if}}
              </div>
              <div class="support-body">  
                {{{compile supportbody}}}
              </div>

            </div>
          </div>

          <div class="popup-btn-container text-right">
            <div class="support_text-container option_instuction w-mobile-50">
              <p>{{supportTitle}}</p>
            </div>

            <div class="support-btn-container w-mobile-50" role="button">
              <img src="{{supportIcon}}" />
            </div>
          </div>

        </div>
        <div class="feedback-container" style="display: none;">
          <div class="feedback-inner-container">
            <h4></h4>
            <div class="feedback-body">
            </div>
          </div>
        </div>
        <div class="btn__container button_show d-flex v-center" style="display: none;"></div>
      </div>
    </div>
  </div>



</div>