@include('header') 

  <section class="body-section">
    <div class="content-width-container split-view">
      @include('left-split-view')
      <div class="primary-content-container">
        <div class="max-w-content">
          <div class="body-outer-wrapper">
            <div class="body-left-panel">
              <h3 class="left-panel-title">Article Inputs</h3>
              <div class="left-panel-description">The following information will be used when creating your outline and final draft.</div>



              <div class="article-input"><strong class="article-input-bold-label">Company Details</strong><br>
                @if ($userDetails->companies[0]->solution_offering)
                    {!! Str::limit(strip_tags(Str::markdown(trim($userDetails->companies[0]->solution_offering))), 100, '...') !!}
                @else
                    No company details.
                @endif
              </div>  
              
              <div class="article-input"><strong class="article-input-bold-label">Keyword</strong><br>{{strtolower($articleSessionDetail->target_keyword)}}</div>
              <div class="article-input"><strong class="article-input-bold-label">Article Type</strong><br>{{strtolower($articleSessionDetail->name)}}</div>
              @include('helper_ui.article-length-toggle')
              </div>
            </div>
            <div class="body-main">
              @include('article-progress-section') 

              <div class="body-main-head-container">
                <div class="body-main-title-block">
                  <h1 class="body-main-title">Writer Persona</h1>
                  <div class="body-main-description">Before we dive into writing, select an editor persona. This will shape the voice and tone of your article, making it uniquely yours.</div>
                </div>
              </div>
              <div class="w-layout-grid writer-persona-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="clientId" value="{{$clientId}}" />
              <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />

              <div class="gen-flow-cta-container">          
                <div class="gen-flow-button-block">
                  <a href="#" class="button button-shadow purple-gradient w-inline-block" id="btn-create-headline-flow">
                    <div class="button-label white-text">Continue</div>
                    <div class="button-icon-container">
                      <img src="{{asset('images/right-arrow-white.svg')}}" loading="lazy" alt="" class="image-2">
                    </div>
                  </a>              
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@include('footer')