@include('header')

  <section class="body-section">
    <div class="max-w-content">
      <div class="body-outer-wrapper">
        <div class="body-left-panel">
          <h3 class="left-panel-title">Custom Topics</h3>
          <div class="left-panel-description">Use the form below to add a list of comma-delimited topics to the client account.</div>
          <form action="#" id="wf-form-Headline" name="wf-form-Headline" data-name="Headline" method="get" class="w-clearfix" data-wf-page-id="64aeb95d48f2dc9858166b1d" data-wf-element-id="a98218c3-44c9-274b-74c4-c04ce737f6e4">
          <div class="w-form">
              <input type="text" class="text-input-custom-keyword w-input" maxlength="256" name="Headline" data-name="Headline" placeholder="e.g. Modern Home Furnishings" id="custom-keywords">
              <input type="hidden" id="_keywordToken" value="{{ csrf_token() }}" />  
          </div>                
          <button type="button" id="add-custom-keyword" class="button button-shadow orange-gradiant w-inline-block white-text">Add Keyword</button>
          <button type="button" id="add-custom-keyword-loading" class="purple-button w-button" style="display: none;">Loading...</button>          
          </form>
        </div>
        <div class="body-main">
          <div class="body-main-head-container">
            <div class="body-main-title-block">
              <h1 class="body-main-title">Topic and Keyword Ideas</h1>
              <div class="body-main-description">Below are keywords pulled for the URL provided. Choose from the keywords below to start the article generation process. Don't see what you're looking for? You can add keywords manually on the form on the left.</div>
            </div>
          </div>



          @if(empty($keywords['data']))
          <div class="alert-warning">
            <div class="cta-alert-container">
              <div class="alert-text">We weren't able to pull keyword metrics based on the URL provided. Add a Custom Keyword to start your first article.</div>
            </div>
          </div>
          @else


          <div class="dashboard-grid-scoller">
            <div class="w-layout-grid grid-2">
              <div id="w-node-_7bf97b4a-471b-e6d2-7f5f-e8a836baadea-6d879fc2" class="grid-title-container text-left">
                <div>topic or keyword</div>
              </div>
              <div id="w-node-fdc36f99-8020-9894-f134-2d44822aba09-6d879fc2" class="grid-title-container text-left">
                <div>position</div>
              </div>
              <div id="w-node-f8517ab1-59cd-f169-4a0a-e61121d32cc8-6d879fc2" class="grid-title-container text-left">
                <div>monthly volume</div>
              </div>
              <div id="w-node-_31e042ed-4ea7-9a20-5377-a8fa5d7f13ad-6d879fc2" class="grid-title-container text-left">
                <div>ranking potential</div>
              </div>


        @isset($keywords['data'])
          @foreach ($keywords['data'] as $keyword)

              
              <form action="#" id="wf-form-Prompt-Editor" name="wf-form-Prompt-Editor" data-name="Prompt Editor" method="get" class="form-2 w-clearfix" data-wf-page-id="{{ csrf_token() }}" data-wf-element-id="80f25990-0689-a4f2-b9e0-dea2ba13570f" aria-label="Prompt Editor">
                <input type="hidden" id="_token" value="{{ csrf_token() }}">
                <div class="keyword-pill-button {{$orangeGradiant}}"></div>
                <a href="#" onclick="headingRedirection({{$keyword['id']}}, 'promptheadlines', true)" >{{ strtolower($keyword['keyword']) }}</a>
                <!--
                <input type="button" value="&#x25B8; &nbsp;{{ strtolower($keyword['keyword']) }}" onclick="headingRedirection({{$keyword['id']}}, 'promptheadlines', true)" class="keyword-pill-button {{$orangeGradiant}}">
              -->
              </form>

              <div class="topic-cluster-grid-value">{{ $keyword['position'] ?: '--' }}</div>
              <div class="topic-cluster-grid-value">{{ number_format($keyword['search_volume'], 0, '', ',') ?: '--' }}/mo</div>
              <div class="mini-progress-bar-container">
                <div class="mini-progress-bar-green" title="{{$kdValue}}" style="width: {{$kdValue}}%"></div>
              </div>
            @endforeach
        @endisset

            </div>
          </div>
          @endif


          <div class="pagination-container">

          @if(isset($keywords['to']))
            @foreach ($keywords['links'] as $link)
            <a href="{{!empty($link['url']) ? $link['url'] : '#' }}" class="pagination-elipse{{$link['active'] ? ' pagination-active' : ''}}">{{html_entity_decode($link['label'])}}</a>
            @endforeach
          @endif

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


@include('footer')