{# partials/permission_widget.html
   Args: search_url, perm_data (list of permission objects)
   Full-width table with dark mode support.
#}
<div x-data="permissionWidget('{{ search_url }}', {{ perm_data | tojson | forceescape }})">
  <input type="hidden" name="perm_data" :value="serializedPermData">

  <div x-show="selectedPerms.length > 0" style="width: 100%;">
    <div style="border: 1px solid var(--surface-border); border-radius: var(--radius-lg); overflow: hidden;">
      <table style="width: 100%; border-collapse: collapse;">
        <thead>
          <tr style="background: var(--surface-inset); border-bottom: 1px solid var(--surface-border);">
            <th style="text-align: left; padding: 10px 16px; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Permission</th>
            <th style="text-align: left; padding: 10px 16px; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em;">Table</th>
            <th style="width: 48px;"></th>
          </tr>
        </thead>
        <tbody>
          <template x-for="(perm, index) in selectedPerms" :key="perm.id">
            <tr style="border-bottom: 1px solid var(--surface-border);" onmouseover="this.style.background='var(--surface-inset)'" onmouseout="this.style.background=''">
              <td style="padding: 12px 16px;">
                <span style="font-size: 0.875rem; font-weight: 500; color: var(--text-primary);" x-text="perm.name"></span>
              </td>
              <td style="padding: 12px 16px;">
                <span style="font-size: 0.875rem; color: var(--text-secondary);" x-text="perm.table_name"></span>
              </td>
              <td style="text-align: center; padding: 12px 16px;">
                <button type="button" @click="removePerm(index)"
                        style="color: var(--text-secondary); cursor: pointer; background: none; border: none; padding: 4px; line-height: 1;"
                        onmouseover="this.style.color='var(--danger-500)'" onmouseout="this.style.color='var(--text-secondary)'">
                  <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>

  {# Empty state #}
  <div x-show="selectedPerms.length === 0" style="text-align: center; padding: 32px 0; font-size: 0.875rem; color: var(--text-secondary);">
    No permissions added yet. Search below to add.
  </div>

  {# Search input #}
  <div style="margin-top: 12px; position: relative;">
    <input type="text" x-model="searchQuery" @input="search()" @focus="open = true" @click.outside="open = false"
           placeholder="Search permissions (e.g. products_view)..."
           class="form-input" style="width: 100%;">
    <div x-show="open && results.length > 0" x-cloak
         style="position: absolute; z-index: 50; width: 100%; margin-top: 4px; background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 200px; overflow-y: auto;">
      <template x-for="result in results" :key="result.id">
        <div @click="addPerm(result)"
             style="padding: 8px 12px; cursor: pointer; font-size: 0.875rem; color: var(--text-primary);"
             onmouseover="this.style.background='var(--surface-inset)'" onmouseout="this.style.background=''">
          <span x-text="result.name"></span>
          <span style="font-size: 0.75rem; color: var(--text-secondary); margin-left: 8px;" x-text="result.table_name"></span>
        </div>
      </template>
    </div>
  </div>
</div>