<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddToListWindow.aspx.cs" Inherits="PDI.Web.AddToListWindow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Add to List</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
	<style>
		body, html {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			font-size: 14px;
			margin: 0;
			padding: 0;
			background-color: #fafafa;
			color: #333;
		}

		.window-container {
			padding: 16px 20px;
		}

		.section {
			margin-bottom: 14px;
			padding-bottom: 14px;
		}

		h3 {
			font-size: 0.95rem;
			color: #6D214F;
			margin: 0 0 10px 0;
			font-weight: 600;
		}

		.input-group {
			margin-bottom: 10px;
		}

		.input-group label {
			display: block;
			margin-bottom: 4px;
			font-weight: 600;
			font-size: 0.85rem;
			color: #555;
		}

		input[type="text"], textarea, select {
			width: 100%;
			padding: 8px 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			font-size: 0.9rem;
			font-family: inherit;
			background: #fff;
			color: #333;
			box-sizing: border-box;
			transition: border-color 0.2s;
			-webkit-appearance: none;
			appearance: none;
		}

		select {
			-webkit-appearance: menulist;
			appearance: menulist;
		}

		input[type="text"]:focus, textarea:focus, select:focus {
			border-color: #6D214F;
			outline: none;
		}

		textarea {
			resize: vertical;
		}

		input[type="submit"] {
			width: 100%;
			padding: 8px 16px;
			background: transparent;
			color: #6D214F;
			border: 1.5px solid #6D214F;
			border-radius: 5px;
			font-size: 0.9rem;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s;
			font-family: inherit;
		}

		input[type="submit"]:hover {
			background: #6D214F;
			color: #fff;
		}

		hr {
			border: 0;
			border-top: 1px solid #e8e0e5;
			margin: 0;
		}

		.list-item-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 7px 10px;
			border-radius: 5px;
			font-size: 0.9rem;
		}

		.list-item-row:hover {
			background-color: #f3eef1;
		}

		.remove-button {
			color: #d9534f;
			text-decoration: none;
			font-size: 0.85rem;
		}

		.remove-button:hover {
			color: #c9302c;
		}

		#pNoLists {
			font-size: 0.85rem;
			color: #999;
			font-style: italic;
		}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

		<asp:Panel ID="pnlMain" runat="server" CssClass="window-container">

			<asp:Label ID="lblMessage" runat="server" />

			<!-- Section 1: Add to existing list -->
			<div class="section">
				<h3>Agregar a una lista existente</h3>
				<div class="input-group">
					<asp:DropDownList ID="ddlUserLists" runat="server" Width="100%" />
				</div>
				<asp:Button ID="btnAddToList" runat="server" Text="Agregar a lista" OnClick="btnAddToList_Click" Width="100%" />
			</div>

			<hr />

			<!-- Section 2: Create new list -->
			<div class="section">
				<h3>Crear nueva lista y agregar</h3>
				<div class="input-group">
					<label for="txtNewListName">Nombre:</label>
					<asp:TextBox ID="txtNewListName" runat="server" Width="100%" />
				</div>
				<div class="input-group">
					<label for="txtNewListDescription">Descripci&oacute;n:</label>
					<asp:TextBox ID="txtNewListDescription" runat="server" TextMode="MultiLine" Rows="2" Width="100%" />
				</div>
				<asp:Button ID="btnCreateAndAdd" runat="server" Text="Crear y Agregar" OnClick="btnCreateAndAdd_Click" Width="100%" />
			</div>

			<asp:Panel ID="sectionCurrentLists" runat="server">
				<hr />

				<!-- Section 3: Document is in these lists -->
				<div class="section">
					<h3>Este documento est&aacute; en:</h3>
					<asp:Repeater ID="rptCurrentLists" runat="server" OnItemCommand="rptCurrentLists_ItemCommand">
						<ItemTemplate>
							<div class="list-item-row">
								<span><%# Eval("Name") %></span>
								<asp:LinkButton runat="server"
									CommandName="Remove"
									CommandArgument='<%# Eval("Id") %>'
									CssClass="remove-button"
									OnClientClick="return confirm('¿Está seguro que desea quitar el documento de esta lista?');">
	                                <i class="fa fa-times"></i>
	                            </asp:LinkButton>
							</div>
						</ItemTemplate>
					</asp:Repeater>
					<p runat="server" id="pNoLists" visible="false">Este documento no est&aacute; en ninguna lista.</p>
				</div>
			</asp:Panel>

		</asp:Panel>
	</form>
</body>
</html>
