@include('header') 
<section class="body-section">
    <div class="transient-message"></div>
    <div class="content-width-container article-gen-flow">
      <div class="primary-content-container article-gen">
        @include('article-progress-section')
        <div class="title-block">
          <div class="title-block-title">
            <div>Writer Persona</div>
            <div class="title-block-description">Before we dive into writing, select an editor persona. This will shape the voice and tone of your article, making it uniquely yours.<br></div>
          </div>
        </div>
        <div class="article-gen-content">
          <div class="article-gen-input-wrapper">
            <div class="article-gen-input-title">Target Keyword</div>
            <div class="article-gen-input-value">{{strtolower($articleSessionDetail->target_keyword)}}</div>
            @isset($articleSessionDetail->name)
                <div class="article-gen-input-title">Article Type</div>
                <div class="article-gen-input-value">{{strtolower($articleSessionDetail->name)}}</div>
            @endisset
            @isset($articleSessionDetail->persona_name)
                <div class="article-gen-input-title">Writer Persona</div>
                <div class="article-gen-input-value">{{strtolower($articleSessionDetail->persona_name)}}</div>
            @endisset
            @isset($articleSessionDetail->headline)
                <div class="article-gen-input-title">Headline</div>
                <div class="article-gen-input-value">{{strtolower($articleSessionDetail->headline)}}</div>
            @endisset
            @isset($articleSessionDetail->narrative)
              <div class="article-gen-input-title">Perspective</div>
              <div class="article-gen-input-value">{{strtolower($articleSessionDetail->narrative)}}</div>
            @endisset
            @include('helper_ui.article-length-toggle')
            @include('helper_ui.article-model-type')
          </div>
          <div class="article-gen-content-wrapper">
            <div class="w-layout-grid article-type-grid">

                @if(isset($personas)) 
                    @foreach($personas as $persona)
                        @php
                        $idName = strtolower(str_replace(' ', '-', $persona['name']));
                        @endphp

                        <a href="#" class="writer-persona-link-block w-inline-block">
                        <div id="article-type-{{$persona['id']}}" class="writer-persona-grid-container {{ isset($articleSessionDetail->persona_name) ? ($persona['name'] === $articleSessionDetail->persona_name ? 'active-article-type' : '') : ($persona['name'] === 'The SEO Specialist' ? 'active-article-type' : '') }}">

                            @if($persona['name'] === 'The SEO Specialist')
                            <div class="article-type-start-here">Start here if you're not sure</div>
                            @endif

                            <div class="writer-persona-avatar-wrapper"><img src="{{asset($persona['avatar_image'])}}" loading="lazy" alt=""></div>
                            <div class="writer-persona-text-container">
                            <div class="writer-persona-name">{{$persona['name']}}</div>
                            <div class="writer-persona-description">{{$persona['summary']}}</div>
                            </div>
                        </div>
                        </a>
                    @endforeach
                @endif

                                <input type="hidden" id="personaId" value="{{$personaId}}" />
            </div>

            {{ csrf_field() }}
            <input type="hidden" id="_token" value="{{ csrf_token() }}" />
            <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />
            <input type="hidden" id="clientId" value="{{$clientId}}" />

            @if(auth()->user()->user_role === 3)
              <div class="canvas-submit-container right">
                <a href="#" class="button button-shadow purple-gradient w-inline-block" id="btn-create-headline-flow">
                  <div class="button-label white-text">Save &amp; Continue</div>
                  <div class="button-icon-container"><img src="{{asset('images/toggle-arrow.svg')}}" loading="lazy" alt="" class="image-3"></div>
                </a>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
</section>
@include('footer')