@php
  $currentStep = getCurrentStepByArticleSession($articleSessionId);
  $WebScrapedUrlCount = getWebScrapedUrlCount($clientId);
@endphp
<div class="progress-container">
  <!-- Step 1 -->
  <a href="/composer/topic-clusters" class="progress-bar-link-block w-inline-block">
    <div class="progress-step-container tooltip-container">
      <div class="progress-eclipse {{$step === 'keyword' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
        <div class="progress-eclipse-label">1</div>
      </div>
      <div class="progress-label {{$step === 'keyword' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Keywords</div>
    </div>
  </a>
  <!-- Step 2 -->
  <a href="/composer/article-type/{{$articleSessionId}}" class="progress-bar-link-block w-inline-block">
    <div class="progress-step-container tooltip-container">
      <div class="progress-eclipse {{$step === 'article-type' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
        <div class="progress-eclipse-label">2</div>
      </div>
      <div class="progress-label {{$step === 'article-type' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Article Type</div>
    </div>
  </a>
  <!-- Step 3 -->
  <a href="{{$currentStep->current_step < 3 ? '#' : '/composer/writer-persona/'.$articleSessionId}}" class="progress-bar-link-block w-inline-block">
    <div class="progress-step-container tooltip-container">
      <div class="progress-eclipse  {{$step === 'personas' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
        <div class="progress-eclipse-label">3</div>
      </div>
      <div class="progress-label {{$step === 'personas' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Writer Persona</div>
      @if($currentStep->current_step < 3) 
        <div class="tooltip-text tooltip-text-article-progress">Complete the current step and click ‘Save and Continue’ to move forward.</div>
      @endif
    </div>
  </a>
  <!-- Step 4 -->
  <a href="{{$currentStep->current_step < 4 ? '#' : '/composer/headline/'.$articleSessionId}}" class="progress-bar-link-block w-inline-block">
    <div class="progress-step-container tooltip-container">
      <div class="progress-eclipse  {{$step === 'headline' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
        <div class="progress-eclipse-label">4</div>
      </div>
      <div class="progress-label {{$step === 'headline' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Headline</div>
      @if($currentStep->current_step < 4) 
        <div class="tooltip-text tooltip-text-article-progress">Complete the current step and click ‘Save and Continue’ to move forward.</div>
      @endif
    </div>
  </a>
  <!-- Step 5 -->
  <a href="{{$currentStep->current_step < 5 ? '#' : '/composer/perspective/'.$articleSessionId}}" class="progress-bar-link-block w-inline-block">
    <div class="progress-step-container tooltip-container">
      <div class="progress-eclipse  {{$step === 'narrative' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
        <div class="progress-eclipse-label">5</div>
      </div>
      <div class="progress-label {{$step === 'narrative' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Perspective</div>
      @if($currentStep->current_step < 5) 
      <div class="tooltip-text tooltip-text-article-progress">Complete the current step and click ‘Save and Continue’ to move forward.</div>
      @endif
    </div>
  </a>
  <!-- Step 6 -->
  @if ($WebScrapedUrlCount >= 2)
    <a href="{{$currentStep->current_step < 6 ? '#' : '/composer/sources/'.$articleSessionId}}" class="progress-bar-link-block w-inline-block">
      <div class="progress-step-container tooltip-container">
        <div class="progress-eclipse  {{$step === 'sources' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
          <div class="progress-eclipse-label">6</div>
        </div>
        <div class="progress-label {{$step === 'sources' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Sources</div>
        @if($currentStep->current_step < 6) 
          <div class="tooltip-text tooltip-text-article-progress">Complete the current step and click ‘Save and Continue’ to move forward.</div>
        @endif
      </div>
    </a>
  @endif
  <a href="{{$currentStep->current_step < 7 ? '#' : '/composer/outline/'.$articleSessionId}}" class="progress-bar-link-block w-inline-block">
    <div class="progress-step-container tooltip-container">
      <div class="progress-eclipse  {{$step === 'outline' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
        <div class="progress-eclipse-label">{{ $WebScrapedUrlCount >= 2 ? 7 : 6 }}</div>
      </div>
      <div class="progress-label {{$step === 'outline' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Outline</div>
      @if($currentStep->current_step < 7) 
        <div class="tooltip-text tooltip-text-article-progress">Complete the current step and click ‘Save and Continue’ to move forward.</div>
      @endif
    </div>
  </a>
  <!-- Step 7 -->
  <a href="{{$currentStep->current_step < 8 ? '#' : '/composer/final-draft/'.$articleSessionId}}" class="progress-bar-link-block w-inline-block">
    <div class="progress-step-container tooltip-container">
      <div class="progress-eclipse  {{$step === 'article' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-eclipse')}}">
        <div class="progress-eclipse-label">{{ $WebScrapedUrlCount >= 2 ? 8 : 7 }}</div>
      </div>
      <div class="progress-label {{$step === 'article' ? 'active-progress-eclipse' : ($currentStep->current_step > 1 ? 'finished' : 'visited-progress-label')}}">Final Draft</div>
      @if($currentStep->current_step < 8) 
        <div class="tooltip-text tooltip-text-article-progress">Complete the previous step and click ‘Save and Continue’ to move forward</div>
      @endif
    </div>
  </a>
</div>