<div class="narrative-inner component-inner">
    {{> component this}}
    <div class="narrative-widget component-widget {{#if _hasNavigationInTextArea}}narrative-text-controls{{/if}}">

        <div class="narrative-content">
            <div class="narrative-content-inner">
                {{#each _items}}
                <div class="narrative-content-item {{#if _isVisited}}visited{{/if}}" data-index="{{@index}}">
                    {{#if title}}
                    <div class="narrative-content-title">
                        <div class="narrative-content-title-inner" {{a11y_attrs_heading 'componentItem'}}>
                            {{{title}}}
                        </div>
                    </div>
                    {{/if}}
                    {{#if _graphic.alt}}{{{a11y_aria_image _graphic.alt}}}{{/if}}
                    <div class="narrative-content-body">
                        <div class="narrative-content-body-inner">
                            {{{compile body}}}
                        </div>
                    </div>
                </div>
                {{/each}}
                <div class="narrative-controls-container clearfix">
                    <div class="narrative-indicators">
                        {{#each _items}}
                        <div class="narrative-progress component-item-color component-item-border {{#if _isVisited}}visited{{/if}}" data-index="{{@index}}"></div>
                        {{/each}}
                    </div>
                    <button class="base narrative-controls narrative-control-left" aria-label="{{_globals._accessibility._ariaLabels.previous}}">
                        <div class="icon icon-controls-left"></div>
                    </button>
                    <button class="base narrative-controls narrative-control-right" aria-label="{{_globals._accessibility._ariaLabels.next}}">
                        <div class="icon icon-controls-right"></div>
                    </button>
                </div>
            </div>
        </div>

        <div class="narrative-strapline">
            <div class="narrative-strapline-header">
                <div class="narrative-strapline-header-inner clearfix" style="width: {{_totalWidth}}%">
                    <div></div>
                    {{#each _items}}
                    <button class="base narrative-strapline-title {{#if _isVisited}}visited{{/if}}" aria-label="{{{strapline}}}" style="width: {{../_itemWidth}}%" data-index="{{@index}}">
                        <div class="narrative-strapline-title-inner h5">
                            {{{strapline}}}
                        </div>
                        <div class="icon icon-plus"></div>
                        <div class="focus-rect"></div>
                    </button>
                    {{/each}}
                </div>
            </div>
        </div>

        <div class="narrative-slide-container">

            <button class="base narrative-controls narrative-control-left" aria-label="{{_globals._accessibility._ariaLabels.previous}}">
                <div class="icon icon-controls-left"></div>
            </button>
            <button class="base narrative-controls narrative-control-right" aria-label="{{_globals._accessibility._ariaLabels.next}}">
                <div class="icon icon-controls-right"></div>
            </button>

            <div class="narrative-slider clearfix" style="width: {{_totalWidth}}%">
                {{#each _items}}
                <div class="narrative-slider-graphic {{#if _isVisited}}visited{{/if}}" style="width: {{../_itemWidth}}%" data-index="{{@index}}">
                    <img src="{{_graphic.src}}" aria-hidden="true" />
                    {{#if _graphic.attribution}}
                        <div class="graphic-attribution">{{{_graphic.attribution}}}</div>
                    {{/if}}
                </div>
                {{/each}}
            </div>
            <div class="narrative-indicators">
                {{#each _items}}
                <div class="narrative-progress component-item-color component-item-border {{#if _isVisited}}visited{{/if}}" data-index="{{@index}}"></div>
                {{/each}}
            </div>
        </div>

        <div class="clearfix"></div>

    </div>
</div>
