@php

use App\Utilities\WebsiteKeywordsUtility;

$keywords = WebsiteKeywordsUtility::merge([
    'user_information',
    'general_information',
    'location_info',
]);

@endphp

<div class="mt-3">

    <button type="button"
            class="btn btn-sm btn-outline-secondary toggle-keywords-btn">

        Show Available Keywords

    </button>

    <div class="available-keywords-box d-none mt-3">

        @foreach($keywords as $groupName => $groupKeywords)

            <div class="mb-3">

                <h6 class="mb-2 text-primary">

                    {{ ucwords(str_replace('_', ' ', $groupName)) }}

                </h6>

                <div class="d-flex flex-wrap gap-2">

                    @foreach($groupKeywords as $keyword => $label)

                        <span class="badge rounded-pill text-bg-light border keyword-item"
                              data-keyword="{{ $keyword }}"
                              title="{{ $label }}"
                              style="cursor:pointer">

                            {{ $keyword }}

                        </span>

                    @endforeach

                </div>

            </div>

        @endforeach

        <div class="form-text text-muted mt-2">

            Click a keyword to copy it.

        </div>

    </div>

</div>