Name *

{name.length}/100 characters

Description (optional)

<p class="text-xs text-gray-500 mt-1">{description.length}/500 characters</p>
				</div>

<div class="bg-gray-50 rounded-md p-4 space-y-2">
					<p class="text-sm font-medium text-gray-700">This view includes:</p>
					<ul class="text-sm text-gray-600 space-y-1">
						{#if filterCount > 0}
							<li class="flex items-center gap-2">
								<svg
									class="w-4 h-4 text-green-600"
									fill="none"
									stroke="currentColor"
									viewBox="0 0 24 24"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M5 13l4 4L19 7"
									/>
								</svg>
								{filterCount} active {filterCount === 1 ? 'filter' : 'filters'}
							</li>
						{/if}
						{#if hasSort}
							<li class="flex items-center gap-2">
								<svg
									class="w-4 h-4 text-green-600"
									fill="none"
									stroke="currentColor"
									viewBox="0 0 24 24"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M5 13l4 4L19 7"
									/>
								</svg>
								Sort by: {config.sort?.columnId} ({config.sort?.direction})
							</li>
						{/if}
						<li class="flex items-center gap-2">
							<svg
								class="w-4 h-4 text-green-600"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M5 13l4 4L19 7"
								/>
							</svg>
							{columnCount} visible {columnCount === 1 ? 'column' : 'columns'} (custom order)
						</li>
						<li class="flex items-center gap-2">
							<svg
								class="w-4 h-4 text-green-600"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M5 13l4 4L19 7"
								/>
							</svg>
							Column widths and page size
						</li>
					</ul>
				</div>

{#if error}
					<div class="bg-red-50 border border-red-200 rounded-md p-3">
						<p class="text-sm text-red-800">{error}</p>
					</div>
				{/if}
			</div>

<div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
				<button
					type="button"
					on:click={handleCancel}
					disabled={saving}
					class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
				>
					Cancel
				</button>
				<button
					type="button"
					on:click={handleSave}
					disabled={saving || !name.trim()}
					class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
				>
					{#if saving}
						<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
							<circle
								class="opacity-25"
								cx="12"
								cy="12"
								r="10"
								stroke="currentColor"
								stroke-width="4"
							/>
							<path
								class="opacity-75"
								fill="currentColor"
								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
							/>
						</svg>
						Saving...
					{:else}
						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
							/>
						</svg>
						Save View
					{/if}
				</button>
			</div>

<div class="px-6 pb-3">
				<p class="text-xs text-gray-500">
					Tip: Press <kbd class="px-1 py-0.5 bg-gray-100 border border-gray-300 rounded text-xs"
						>Esc</kbd
					> to cancel,
					<kbd class="px-1 py-0.5 bg-gray-100 border border-gray-300 rounded text-xs">Ctrl</kbd>
					+
					<kbd class="px-1 py-0.5 bg-gray-100 border border-gray-300 rounded text-xs">Enter</kbd>
					to save
				</p>
			</div>
		</div>
	</div>
{/if}