<div class="component__inner narrative__inner mr_wrapper_container_narrative" style="background-color: {{bgColor}};">

  {{!-- {{> component this}} --}}

  <div class="narrative_main_container">
    <div class="narrative-container-title">

      <h2 class="narrative_heading" tabindex="0" style="color: {{titleColor}}">
        {{{title}}}
      </h2>

      <div class="instruction_text" tabindex="0">
        {{{body}}}

        {{#if instruction}}
        <p style="margin-top: 5px;margin-bottom: -2px;" tabindex="0"><em>{{instruction}}</em></p>
        {{/if}}

        <span tabindex="0" id="focusText"></span>  
      </div>


      {{!-- <div
        class="component__widget narrative__widget{{#if _hasNavigationInTextArea}} narrative__text-controls{{/if}}">
        --}}
        <div class="main_narrative_wrapper">
          <div class="main_slider_container">    

            <div class="main-container">
            
              <div class="narrative__slide-container">
                <div class="narrative__slider">

                  {{#each _items}}
                  <div
                    class="narrative__slider-image-container{{#if _isVisited}} is-visited{{/if}}{{#if _graphic.attribution}} has-attribution{{/if}}"
                    style="" data-index="{{@index}}">
                    <div class="cyuScroll">
                      
                      <div class="cyu-title">
                        <h1 tabindex="0" id="qText" role="text">
                          {{qtext}}
                        </h1>

                        <p tabindex="0" id="instruction_text">
                          {{{instructionText}}}
                        </p>
                        <span tabindex="0" id="questionRadioFocus"></span>
                      </div>
                      <div id="cyu_block" class="cyuBlock_class">
                        <ul class="cyu-options list-unstyled">
                          {{#each optionItem}}
                          <li id="opt_{{optionindex}}" class="_item cyu-option" data-index="{{optionindex}}" style="background-color: {{bgcolor}};">
                            <label class="lab_container" for="radio_{{optionindex}}">
                              {{optext}}
                              <input type="radio" id="radio_{{@index}}" class="redkBox" name="{{QID}}"    
                                data-correct="{{iscorrect}}">
                              <span class="radioassessment"></span>
                              <span class="correctIncorrectIcon"></span>
                            </label>
                          </li>
                          {{/each}}
                        </ul>
                      </div>
                      <button class="submitBtn disabledbtn" style="background-color: {{btnbgcolor}};">Submit</button>
                      <button class="showAnswer" style="display: none; background-color: {{btnbgcolor}};">Show feedback</button>
                    </div>
                  </div>
                  {{/each}}
                </div>
              </div>

              <div class="narrative__content">
                <div class="narrative__content-inner">
                  {{#each _items}}
                  <div class="narrative__content-item{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
                    <div class="disabled">
                     
                      <div class="narrative__content-body">
                        <div class="narrative__content-body-inner">

                          {{!-- {{{compile body}}} --}}

                          <div class='feedback-container'>
                            <div class='correct' style='display:none'>
                              <img src='{{_feedback._correct.icon}}' class='feedbackIcon' />
                                <strong tabindex="0">{{_feedback._correct.heading}}</strong>
                              <div class="feedback-body" tabindex="0">
                                   {{{_feedback._correct.text}}} 
                              </div>
                              {{!-- <div class='closeBtn_CYU' style='cursor:pointer; position:absolute;top:20px;right:20px;' role="button" tabindex="0"> --}}

                                <button class="closeBtn_CYU" style='cursor:pointer; position:absolute;top:20px;right:20px; color: #000;'></button>
                              {{!-- </div> --}}
                            </div>


                            <div class='incorrect' style='display:none'>
                               <img src='{{_feedback._incorrect.icon}}'  class='feedbackIcon' />
                               <strong tabindex="0">{{_feedback._incorrect.heading}}</strong>
                                <div class="feedback-body" tabindex="0">
                                   {{{_feedback._incorrect.text}}} 
                               </div>
                               <button class="closeBtn_CYU" style='cursor:pointer; position:absolute;top:20px;right:20px; color: #000;'></button>
                              {{!-- <div class='closeBtn_CYU'  aria-level="" role="button" tabindex="0">
                              </div> --}}
                            </div>
                          </div>

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


                  </div>
                  {{/each}}


                </div>
              </div>

              <div class="narrative__indicators narrative__slide-indicators" aria-hidden="true">

                {{#each _items}}
                <div
                  class="narrative__progress js-narrative-progress-click{{#if _isVisited}} is-visited{{/if}} nextDisabled"
                  data-index="{{@index}}"></div>
                {{/each}}

              </div>             
            </div>


            <button data-direction="left"
              class="btn-icon narrative__controls narrative__controls-left js-narrative-controls-click"
              aria-label="{{_globals._accessibility._ariaLabels.previous}}" role="button">
              <img src="course\en\images\icon\back.png" />
            </button>

            <button data-direction="right"
              class="btn-icon narrative__controls narrative__controls-right js-narrative-controls-click"
              aria-label="{{_globals._accessibility._ariaLabels.next}}" disabled="disbled" role="button">
              <img src="course\en\images\icon\next.png" />
            </button>

          <div class="">      
            {{#if footerText}}
                <p class="narrativFooter" >{{footerText}}</p>
            {{/if}}      
       </div>
          </div>   
        </div>






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