@include('header') 

<section class="body-section">
  @if (session('success'))
      <div class="alert alert-success">
          {{ session('success') }}
      </div>
  @endif
  @if (session('error'))
      <div class="col-sm-12">
          <div class="alert alert-error" role="alert">
              {{ session('error') }}
          </div>
      </div>
  @endif
    <div class="max-w-content">
      <div class="body-outer-wrapper topic-cluster">
        <div class="body-main-title-block">
          <h1 class="body-main-title">Content Ideas</h1>
          <div class="body-main-description">This is where all great ideas start. We’ve identified <strong>{{countAllClusterTopics($companies['client_id'])}}</strong> topics to choose from. Start by choosing from one of the topic areas below.</div>        
        </div>
        <div class="w-layout-grid tc-parent-grid">
        @cannot('hide-company-profile')
          <div id="w-node-_59804c8d-7606-4b56-f622-d7cb3cb830c1-36a2d30f" class="tc-compay-bio-parent">
            <div class="tc-company-bio-title">Company Profile</div>
            @if($companies->solution_offering !== null)
              <div class="tc-company-bio-summary">{!! Str::markdown(trim($companies->solution_offering)) !!}</div>
            @else
              <div class="tc-company-bio-summary">Your company profile is empty. Please update your Company Profile.</div>
            @endif
            <div class="tc-company-bio-button">
              <a href="/composer/company-overview" class="tc-company-bio-button-text">Update Company Profile</a>
            </div>
          </div>
        @endcannot
        @cannot('hide-favorite-topics')
          <div id="w-node-b10cc4ca-c049-0856-233a-6bbd648181ae-36a2d30f" class="tc-bucket-parent custom">
            <div class="tc-bucket-title white">Favorite Topics</div>
            @if($keywords)
              <ul role="list" class="tc-bucket-list custom">
                  @foreach($keywords as $index => $keyword)
                      @if($index < 3)
                          <li>
                              <a href="#" class="tc-bucket-link white" data-value="{{ $keyword['id'] }}" data-user-role="{{ auth()->user()->user_role }}">{!! Str::limit(trim(strtolower($keyword['keyword'])), 40, '...') !!}</a>
                          </li>
                      @endif
                  @endforeach
              </ul>
              <div class="tc-bucket-button-parent">
                  @php
                      $remainingCount = count($keywords) > 3 ? count($keywords) - 3 : 0;
                  @endphp
                <a href="/composer/custom-topics-listing/" class="tc-bucket-button-text custom">+{{$remainingCount}} topics</a>
              </div>
            @else
              <div class="tc-custom-null-button-container">
                <a href="/composer/custom-topics-listing/" class="button white-button w-inline-block" id="add-custom-topic">
                  <div class="button-label white-text dark-text">Add Favorite Topic</div>
                </a>
              </div>
            @endif
          </div>
        @endcannot
          @if(isset($topicClusters) && count($topicClusters) > 0)
              @foreach($topicClusters as $cluster)
              <div id="w-node-fb3da3d1-5d97-0dcb-e384-bbd2fda67a42-36a2d30f" class="tc-bucket-parent">
                <div class="tc-bucket-title">{{$cluster['keyword']}}</div>
                <ul role="list" class="tc-bucket-list">
                  @foreach($cluster['topics'] as $topic)
                  <li>
                      <a href="#" class="tc-bucket-link" data-value="{{ $topic['id'] }}" data-user-role="{{ auth()->user()->user_role }}">{{ strtolower($topic['keyword']) }}</a>
                  </li>
                  @endforeach
                </ul>
                <div class="tc-bucket-button-parent">
                  <a href="/composer/topic-clusters/topics/{{$cluster['id']}}" class="tc-bucket-button-text">+{{countTopicByCluster($topic['parent_id'])}} topics</a>
                </div>
              </div>
              @endforeach
          @endif

          <div class="tc-bucket-parent tc-bucket-loader-container" id="cluster-loader" style="display: none;">
            <div>Loading...</div>
            <img src="{{asset('images/loader.gif')}}" width="35" alt="loader" />
          </div>

          @if($isLoaderVisible)
            <div class="tc-bucket-parent tc-bucket-loader-container" id="initial-cluster-loader">
              <div>Loading...</div>
              <img src="{{asset('images/loader.gif')}}" width="35" alt="loader" />
            </div>
          @endif
        </div>

      </div>
    </div>
  </section>

@vite('resources/js/app.js')
{{-- <script src="{{ asset('js/app.js')}}"></script> --}}

<script type="module">
  const channelId = `topic-cluster-channel-${