@extends('layouts.app')
@section('content')
    <div>

        <div class="Polaris-Layout" style="margin-left: 0;margin-right: 2rem">
            <div class="Polaris-Layout__Section Polaris-Layout__Section--oneHalf">
                <div class="Polaris-Card">
                    <div class="Polaris-Card__Header">
                        <div class="Polaris-Stack Polaris-Stack--alignmentBaseline">
                            <div class="Polaris-Stack__Item Polaris-Stack__Item--fill">
                                <h2 class="Polaris-Heading">Product Selection</h2>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="Polaris-Card__Section"><span class="Polaris-TextStyle--variationSubdued">455 units available</span> --}}
                    {{-- </div> --}}
                    <div class="Polaris-Card__Section">
                        <div>
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label"><label id="PolarisTextField12Label" for="PolarisTextField12" class="Polaris-Label__Text">Add SKUs For Matching</label></div>
                                </div>
                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                    <div class="Polaris-TextField"><input id="PolarisTextField12" placeholder="Add SKUs" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField12Label" aria-invalid="false" value="">
                                        <div class="Polaris-TextField__Backdrop"></div>
                                    </div>
                                    </div>
                                </div>
                                <br />
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label"><label id="PolarisTextField12Label" for="PolarisTextField12" class="Polaris-Label__Text">Tag Description</label></div>
                                </div>
                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField"><input id="PolarisTextField13" placeholder="Tag Description" autocomplete="off" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField13Label" aria-invalid="false" value="">
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 10px;">
                            <button class="Polaris-Button Polaris-Button--sizeLarge add-keyword-btn" type="button">
                                <span class="Polaris-Button__Content">
                                    <span class="Polaris-Button__Text">Add</span>
                                </span>
                            </button>
                            <div id="PolarisPortalsContainer"></div>
                        </div>
                    </div>
                    <div class="Polaris-Card__Section">
                        <div>
                            <div class="Polaris-Card">
                              <div class="Polaris-IndexTable">
                                <div class="Polaris-IndexTable__StickyTable" role="presentation">
                                  <div>
                                    <div></div>
                                    <div>
                                      <div class="Polaris-IndexTable__StickyTableHeader">
                                        <div class="Polaris-IndexTable__StickyTableColumnHeader">
                                          <div class="Polaris-IndexTable__TableHeading" data-index-table-sticky-heading="true" style="min-width: 171px;">
                                            <div class="Polaris-Stack Polaris-Stack--spacingNone Polaris-Stack--alignmentCenter Polaris-Stack--noWrap">
                                              <div class="Polaris-Stack__Item">
                                                <div class="Polaris-IndexTable__FirstStickyHeaderElement">Tag</div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="Polaris-IndexTable__StickyTableHeadings">
                                          <div class="Polaris-IndexTable__TableHeading Polaris-IndexTable__StickyTableHeading--second Polaris-IndexTable--unselectable" data-index-table-sticky-heading="true" style="min-width: 171px;">Tag</div>
                                          <div class="Polaris-IndexTable__TableHeading" data-index-table-sticky-heading="true" style="min-width: 209px;">Tag Description</div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="Polaris-IndexTable-ScrollContainer">
                                  <table class="Polaris-IndexTable__Table Polaris-IndexTable__Table--unselectable">
                                    <thead>
                                      <tr>
                                        <th class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second Polaris-IndexTable__TableHeading--unselectable" data-index-table-heading="true">Tag</th>
                                        <th class="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--unselectable" data-index-table-heading="true">Tag Description</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($tags as $tag)
                                            <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable" id="product_tag_{{$tag->id}}">
                                                <td class="Polaris-IndexTable__TableCell"><span class="Polaris-TextStyle--variationStrong">{{ $tag->tag_name }}</span></td>
                                                <td class="Polaris-IndexTable__TableCell">{{ $tag->tags_description }}</td>
                                                <td class="Polaris-IndexTable__TableCell">
                                                    <div><button class="Polaris-Button Polaris-Button--destructive delete-tag" type="button" data-id="{{ $tag->id }}"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Delete tag</span></span></button>
                                                        <div id="PolarisPortalsContainer"></div>
                                                      </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                              <div class="Polaris-IndexTable__ScrollBarContainer">
                                <div class="Polaris-IndexTable__ScrollBar" style="--p-scroll-bar-content-width:712px;">
                                  <div class="Polaris-IndexTable__ScrollBarContent"></div>
                                </div>
                              </div>
                            </div>
                            <div id="PolarisPortalsContainer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="PolarisPortalsContainer"></div>
    </div>
@endsection