@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>Choose an Article Type</div>
            <div class="title-block-description">Now, let's define the type of article. Are you aiming for a concise listicle, a thought-provoking personal essay, or a sharp piece of commentary?<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 no-bottom-padding" style="margin-bottom: 15px;">{{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($articleTypes)) 
                  @foreach($articleTypes as $types)
                    @php
                      $idName = strtolower(str_replace(' ', '-', $types['name']));
                    @endphp

                    <a href="#" class="article-type-link-block w-inline-block" >
                    <div class="article-type-grid-container {{ isset($articleSessionDetail->name) ? ($types['name'] === $articleSessionDetail->name ? 'active-article-type' : '') : ($types['id'] == 1 ? 'active-article-type' : '') }}" id="article-type-{{$types['id']}}">
                        <div class="article-type-name">{{$types['name']}}</div>
                        <div class="article-type-description">{{$types['summary']}}</div>


                        @if($types['id'] === 1)
                        <div class="article-type-start-here">Start here if you're not sure</div>
                        @endif

                      </div>
                    </a>

                  @endforeach
                @endif
                <input type="hidden" id="_token" value="{{ csrf_token() }}" />
                <input type="hidden" id="articleTypeId" value="{{$articleTypes[0]['id']}}" />
                <input type="hidden" id="articleSessionId" value="{{$articleSessionId}}" />
                <input type="hidden" id="clientId" value="{{$clientId}}" />
            </div>
            @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-writer-persona-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')