"use client";

import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import { dateTimeCL } from "../lib/datetime";
import { userMessage } from "../lib/messages";
import MattersManagement from "./MattersManagement";

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || "/api/v1";
type Row = Record<string, unknown>;
type Entity = {id:number;uuid:string;nombre_fantasia:string;rut:string;comuna:string;region:string;rol_membresia:string;capacidades:string[]};
type Context = Entity & {capacidad:string};
export type WorkspaceHome = {contexto:Context;entidades:Entity[];metrics:Record<string,number>;recent:Row[];portal_hosts:Record<string,string>};
type Tab = "overview"|"received"|"sent"|"documents"|"billing"|"team"|"integrations"|"services";

const labels:Record<string,string>={NOTARIA:"Notaría",CONSERVADOR:"Conservador",ARCHIVERO:"Archivero judicial",ADMIN:"Administrador",OPERADOR:"Operador",LECTOR:"Sólo lectura",FACTURACION:"Facturación"};
function money(value:unknown){return new Intl.NumberFormat("es-CL",{style:"currency",currency:"CLP",maximumFractionDigits:0}).format(Number(value||0))}
function hostCapability(){if(typeof window==="undefined")return "";return ({"notaria.documenta.cl":"NOTARIA","cbr.documenta.cl":"CONSERVADOR","archivero.documenta.cl":"ARCHIVERO"} as Record<string,string>)[window.location.hostname]||""}
function errorMessage(detail:unknown,fallback:string){if(typeof detail==="string")return detail;if(Array.isArray(detail))return detail.map((item)=>String((item as {msg?:string}).msg||"valor inválido")).join(" · ");return fallback}

export default function EntityWorkspace({initial,csrf,notify,onContextChanged}:{initial:WorkspaceHome|null;csrf:()=>Promise<string>;notify:(message:string)=>void;onContextChanged:()=>Promise<void>}){
  const validInitial=Boolean(initial?.contexto&&Array.isArray(initial?.entidades));
  const [home,setHome]=useState<WorkspaceHome|null>(validInitial?initial:null);
  const [tab,setTab]=useState<Tab>("overview");
  const [data,setData]=useState<Row|null>(null);
  const [busy,setBusy]=useState(false);
  const [detail,setDetail]=useState<Row|null>(null);
  const [showCreate,setShowCreate]=useState(false);
  const fixedCapability=hostCapability();
  const capability= fixedCapability || home?.contexto.capacidad || "";
  const headers=useMemo<Record<string,string>>(()=>capability?{"X-Documenta-Capability":capability}:{} as Record<string,string>,[capability]);
  const canOperate=["ADMIN","OPERADOR"].includes(home?.contexto.rol_membresia||"");
  const canAdmin=home?.contexto.rol_membresia==="ADMIN";
  const canBilling=["ADMIN","FACTURACION"].includes(home?.contexto.rol_membresia||"");

  const request=useCallback(async(path:string,options:RequestInit={})=>{const mergedHeaders=new Headers(headers);new Headers(options.headers).forEach((value,key)=>mergedHeaders.set(key,value));const response=await fetch(`${apiBase}/panel/workspace${path}`,{credentials:"include",cache:"no-store",...options,headers:mergedHeaders});const body=await response.json();if(!response.ok)throw new Error(errorMessage(body.detail,"No fue posible completar la operación."));return body as Row},[headers]);
  async function refreshHome(){const body=await request("") as WorkspaceHome;setHome(body);return body}
  async function load(target:Tab){setTab(target);setBusy(true);setData(null);try{if(target==="overview"){await refreshHome();return}const endpoint=target==="received"?"/inbox?box=RECIBIDAS":target==="sent"?"/inbox?box=ENVIADAS":`/${target}`;setData(await request(endpoint));}catch(reason){notify(userMessage(reason,"No fue posible cargar la sección."));}finally{setBusy(false)}}
  async function changeContext(entityId:number,selectedCapability?:string){if(!home)return;const entity=home.entidades.find(item=>item.id===entityId);const nextCapability=fixedCapability||selectedCapability||entity?.capacidades[0]||"";setBusy(true);try{const token=await csrf();await request("/context",{method:"PUT",headers:{"Content-Type":"application/json","X-CSRF-Token":token,"X-Documenta-Capability":nextCapability},body:JSON.stringify({entidad_id:entityId,capacidad:nextCapability})});await onContextChanged();const updated=await request("",{headers:{"X-Documenta-Capability":nextCapability}}) as WorkspaceHome;setHome(updated);setTab("overview");setData(null);notify("Contexto institucional actualizado correctamente.");}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible cambiar el contexto.");}finally{setBusy(false)}}
  async function openRequest(id:number){setBusy(true);try{setDetail(await request(`/requests/${id}`));}catch(reason){notify(userMessage(reason,"No fue posible abrir la solicitud."));}finally{setBusy(false)}}
  async function updateStatus(id:number,status:string,message?:string){setBusy(true);try{const token=await csrf();await request(`/requests/${id}/status`,{method:"PUT",headers:{"Content-Type":"application/json","X-CSRF-Token":token},body:JSON.stringify({estado:status,mensaje:message||null})});notify("Estado de la solicitud actualizado correctamente.");setDetail(null);await load(tab);}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible actualizar la solicitud.");}finally{setBusy(false)}}
  async function createRequest(event:FormEvent<HTMLFormElement>){event.preventDefault();setBusy(true);try{const form=new FormData(event.currentTarget),token=await csrf();const result=await request("/requests",{method:"POST",headers:{"Content-Type":"application/json","X-CSRF-Token":token},body:JSON.stringify({oferta_id:Number(form.get("oferta_id")),asunto:form.get("asunto"),mensaje:form.get("mensaje"),solicitud_origen_id:form.get("solicitud_origen_id")?Number(form.get("solicitud_origen_id")):null,relacion_tipo:form.get("relacion_tipo")||"DERIVACION"})});notify(`Solicitud ${result.folio} creada correctamente.`);setShowCreate(false);await load("sent");}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible crear la solicitud.");}finally{setBusy(false)}}
  async function addMember(event:FormEvent<HTMLFormElement>){event.preventDefault();const formElement=event.currentTarget;setBusy(true);try{const form=new FormData(formElement),token=await csrf();await request("/team",{method:"POST",headers:{"Content-Type":"application/json","X-CSRF-Token":token},body:JSON.stringify({email:form.get("email"),rol:form.get("rol")})});notify("Membresía guardada correctamente.");formElement.reset();await load("team");}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible guardar la membresía.");}finally{setBusy(false)}}
  async function removeMember(id:number){if(!window.confirm("¿Desactivar esta membresía en la entidad?"))return;setBusy(true);try{const token=await csrf();await request(`/team/${id}`,{method:"DELETE",headers:{"X-CSRF-Token":token}});notify("Membresía desactivada correctamente.");await load("team");}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible desactivar la membresía.");}finally{setBusy(false)}}
  async function reactivateMember(id:number){setBusy(true);try{const token=await csrf();await request(`/team/${id}/reactivate`,{method:"PUT",headers:{"X-CSRF-Token":token}});notify("Membresía reactivada correctamente.");await load("team");}catch(reason){notify(reason instanceof Error?reason.message:"No fue posible reactivar la membresía.");}finally{setBusy(false)}}

  if(!home)return <div className="panel-empty">No fue posible cargar el workspace institucional.</div>;
  const tabs:[Tab,string][]=[["overview","Resumen"],["received","Recibidas"],["sent","Enviadas"],["documents","Documentos"],...(canBilling?[["billing","Facturación"] as [Tab,string]]:[]),["team","Equipo"],["services","Servicios"]];
  const selectedEntity=home.contexto;
  return <div className="entity-workspace">
    <section className="panel-card workspace-context"><div><span className="section-kicker">WORKSPACE DE ENTIDAD</span><h2>{selectedEntity.nombre_fantasia}</h2><p>{labels[selectedEntity.capacidad]||selectedEntity.capacidad} · {labels[selectedEntity.rol_membresia]||selectedEntity.rol_membresia} · {selectedEntity.comuna}</p></div><div className="workspace-context-selectors"><label>Entidad<select value={selectedEntity.id} disabled={busy} onChange={event=>void changeContext(Number(event.target.value))}>{home.entidades.filter(entity=>!fixedCapability||entity.capacidades.includes(fixedCapability)).map(entity=><option key={entity.id} value={entity.id}>{entity.nombre_fantasia}</option>)}</select></label>{!fixedCapability&&<label>Capacidad<select value={selectedEntity.capacidad} disabled={busy} onChange={event=>void changeContext(selectedEntity.id,event.target.value)}>{selectedEntity.capacidades.map(item=><option key={item} value={item}>{labels[item]||item}</option>)}</select></label>}</div></section>
    <nav className="workspace-tabs" aria-label="Secciones de la entidad">{tabs.map(([key,label])=><button key={key} className={tab===key?"is-active":""} onClick={()=>void load(key)}>{label}</button>)}</nav>
    {busy&&<div className="panel-empty">Actualizando información…</div>}
    {!busy&&tab==="overview"&&<Overview home={home} open={openRequest}/>} 
    {!busy&&(tab==="received"||tab==="sent")&&<Inbox data={data} sent={tab==="sent"} onOpen={openRequest} canCreate={canOperate} onCreate={()=>setShowCreate(true)}/>} 
    {!busy&&tab==="documents"&&<SimpleTable rows={(data?.items||[]) as Row[]} empty="No hay documentos institucionales disponibles."/>}
    {!busy&&tab==="billing"&&<Billing data={data}/>} 
    {!busy&&tab==="team"&&<Team data={data} canAdmin={canAdmin} onAdd={addMember} onRemove={removeMember} onReactivate={reactivateMember}/>}
    {!busy&&tab==="integrations"&&<Integrations data={data} entityId={selectedEntity.id}/>} 
    {!busy&&tab==="services"&&<Services data={data} canAdmin={canAdmin} entityId={selectedEntity.id} csrf={csrf} notify={notify}/>} 
    {showCreate&&<RequestModal onClose={()=>setShowCreate(false)} onSubmit={createRequest} request={request}/>} 
    {detail&&<DetailModal data={detail} entityId={selectedEntity.id} canOperate={canOperate} busy={busy} onClose={()=>setDetail(null)} onStatus={updateStatus}/>} 
  </div>;
}

function Overview({home,open}:{home:WorkspaceHome;open:(id:number)=>Promise<void>}){return <><div className="metrics-grid workspace-metrics">{Object.entries(home.metrics).map(([key,value])=><article className="metric-card" key={key}><small>{key.replaceAll("_"," ")}</small><strong>{key==="facturacion_mes"?money(value):Number(value||0).toLocaleString("es-CL")}</strong></article>)}</div><section className="panel-card workspace-list"><header><div><span className="section-kicker">ACTIVIDAD RECIENTE</span><h2>Solicitudes recibidas</h2></div></header><RequestTable rows={home.recent} onOpen={open}/></section></>}
function Inbox({data,sent,onOpen,canCreate,onCreate}:{data:Row|null;sent:boolean;onOpen:(id:number)=>Promise<void>;canCreate:boolean;onCreate:()=>void}){const rows=(data?.items||[]) as Row[],kpis=(data?.kpis||{}) as Row;return <section className="panel-card workspace-list"><header><div><span className="section-kicker">{sent?"SOLICITUDES SALIENTES":"BANDEJA INSTITUCIONAL"}</span><h2>{sent?"Solicitudes enviadas":"Solicitudes recibidas"}</h2><p>{Number(kpis.total||0)} registros</p></div>{sent&&canCreate&&<button className="button button-primary" onClick={onCreate}>Nueva solicitud</button>}</header><RequestTable rows={rows} onOpen={onOpen}/></section>}
function RequestTable({rows,onOpen}:{rows:Row[];onOpen:(id:number)=>Promise<void>}){if(!rows.length)return <div className="panel-empty">No hay solicitudes para mostrar.</div>;return <div className="panel-table-wrap"><table><thead><tr><th>Folio</th><th>Solicitud</th><th>Contraparte</th><th>Estado</th><th>Plazo</th><th></th></tr></thead><tbody>{rows.map(row=><tr key={String(row.id)} className={!row.leida_en?"is-unread":""}><td><strong>{String(row.folio)}</strong><small>{dateTimeCL(row.creada_en)}</small></td><td>{String(row.asunto)}<small>{String(row.servicio)}</small></td><td>{String(row.entidad_origen||row.entidad_destino||"Persona solicitante")}</td><td><span className="workspace-status">{String(row.estado).replaceAll("_"," ")}</span></td><td className={row.sla_vencido?"is-overdue":""}>{row.sla_vence_en?dateTimeCL(row.sla_vence_en):"—"}</td><td><button className="button button-secondary button-small" onClick={()=>void onOpen(Number(row.id))}>Abrir</button></td></tr>)}</tbody></table></div>}
function Billing({data}:{data:Row|null}){const summary=(data?.summary||{}) as Row;return <><div className="metrics-grid"><article className="metric-card"><small>Documentos</small><strong>{Number(summary.documentos||0).toLocaleString("es-CL")}</strong></article><article className="metric-card"><small>Monto realizado</small><strong>{money(summary.monto)}</strong></article><article className="metric-card"><small>Comisión</small><strong>{money(summary.comision)}</strong></article></div><section className="panel-card workspace-list"><h2>Operaciones realizadas</h2><SimpleTable rows={(data?.items||[]) as Row[]} empty="No hay operaciones realizadas."/></section></>}
function Team({data,canAdmin,onAdd,onRemove,onReactivate}:{data:Row|null;canAdmin:boolean;onAdd:(e:FormEvent<HTMLFormElement>)=>Promise<void>;onRemove:(id:number)=>Promise<void>;onReactivate:(id:number)=>Promise<void>}){
  const rows=(data?.items||[]) as Row[];
  const activeAdmins=rows.filter(row=>Boolean(row.activo)&&row.rol==="ADMIN").length;
  return <div className="workspace-two-columns"><section className="panel-card workspace-list"><h2>Miembros de la entidad</h2>
    {activeAdmins<=1&&<p>La entidad debe conservar al menos un administrador activo. Asigna ese rol a otra cuenta antes de desactivar al último.</p>}
    <div className="panel-table-wrap"><table><thead><tr><th>Usuario</th><th>Rol</th><th>2FA</th><th>Estado</th><th></th></tr></thead><tbody>
      {rows.map(row=><tr key={String(row.id)}><td><strong>{String(row.nombres)} {String(row.apellidos)}</strong><small>{String(row.email)}</small></td>
        <td>{labels[String(row.rol)]||String(row.rol)}</td><td>{row.mfa_habilitado?"Activo":"Pendiente"}</td><td>{row.activo?"Activo":"Inactivo"}</td>
        <td>{canAdmin&&(row.activo
          ? <button type="button" className="button button-danger button-small" disabled={row.rol==="ADMIN"&&activeAdmins<=1} title={row.rol==="ADMIN"&&activeAdmins<=1?"Asigna primero otro administrador":"Desactivar membresía"} onClick={()=>void onRemove(Number(row.id))}>Desactivar</button>
          : <button type="button" className="button button-secondary button-small" onClick={()=>void onReactivate(Number(row.id))}>Reactivar</button>)}</td></tr>)}
    </tbody></table></div></section>
    {canAdmin&&<form className="panel-card profile-form" onSubmit={onAdd}><span className="section-kicker">MEMBRESÍA</span><h2>Agregar cuenta existente</h2>
      <p>La persona debe tener una cuenta activa en Documenta. Si aparece como inactiva en la lista, usa «Reactivar».</p>
      <label>Correo<input name="email" type="email" required/></label><label>Rol<select name="rol" defaultValue="OPERADOR">
        <option value="ADMIN">Administrador</option><option value="OPERADOR">Operador</option><option value="LECTOR">Sólo lectura</option><option value="FACTURACION">Facturación</option>
      </select></label><button className="button button-primary">Guardar membresía</button></form>}
  </div>;
}
function Integrations({data,entityId}:{data:Row|null;entityId:number}){const rows=(data?.items||[]) as Row[];return <section className="panel-card workspace-list"><header><div><span className="section-kicker">INTEGRACIONES</span><h2>Credenciales de la entidad</h2><p>Los secretos y sus huellas no se exponen en este listado.</p></div><a className="button button-primary" href={`/panel/entidad/${entityId}/credenciales`}>Administrar credenciales</a></header><SimpleTable rows={rows} empty="No hay credenciales configuradas."/></section>}
function Services({data,canAdmin,entityId,csrf,notify}:{data:Row|null;canAdmin:boolean;entityId:number;csrf:()=>Promise<string>;notify:(message:string)=>void}){const rows=(data?.items||[]) as Row[];if(canAdmin)return <MattersManagement data={data} csrf={csrf} notify={notify} entityId={entityId} entityMode/>;return <section className="panel-card workspace-list"><header><div><span className="section-kicker">OFERTA INSTITUCIONAL</span><h2>Servicios configurados</h2><p>Un administrador de la entidad puede personalizar requisitos, campos y plantillas.</p></div></header><div className="workspace-service-grid">{rows.map(row=><article key={String(row.id)}><small>{String(row.categoria)}</small><h3>{String(row.servicio)}</h3><strong>{money(row.precio)}</strong><p>{String(row.tipo_cobertura).toLowerCase().replaceAll("_"," ")} · {row.plazo_estimado_horas?`${row.plazo_estimado_horas} h`:"sin plazo comercial configurado"}</p><span className={row.activo?"is-active":""}>{row.activo?"Activo":"Inactivo"}</span></article>)}</div>{!rows.length&&<div className="panel-empty">No hay servicios configurados.</div>}</section>}
function SimpleTable({rows,empty}:{rows:Row[];empty:string}){if(!rows.length)return <div className="panel-empty">{empty}</div>;const columns=Object.keys(rows[0]).filter(key=>!["id"].includes(key)).slice(0,8);return <div className="panel-table-wrap"><table><thead><tr>{columns.map(key=><th key={key}>{key.replaceAll("_"," ")}</th>)}</tr></thead><tbody>{rows.map((row,index)=><tr key={String(row.id||index)}>{columns.map(key=><td key={key}>{key.includes("fecha")||key.endsWith("_en")?dateTimeCL(row[key]):typeof row[key]==="boolean"?(row[key]?"Sí":"No"):String(row[key]??"—")}</td>)}</tr>)}</tbody></table></div>}
function RequestModal({onClose,onSubmit,request}:{onClose:()=>void;onSubmit:(e:FormEvent<HTMLFormElement>)=>Promise<void>;request:(path:string,options?:RequestInit)=>Promise<Row>}){
  const [options,setOptions]=useState<Row[]>([]);
  const [origins,setOrigins]=useState<Row[]>([]);
  const [originId,setOriginId]=useState("");
  const [loading,setLoading]=useState(true);
  const [loadError,setLoadError]=useState("");
  const [originsError,setOriginsError]=useState(false);
  useEffect(()=>{
    let active=true;
    request("/requests/options").then(body=>{if(active)setOptions((body.items||[]) as Row[])})
      .catch(reason=>{if(active)setLoadError(reason instanceof Error?reason.message:"No fue posible cargar las ofertas.")})
      .finally(()=>{if(active)setLoading(false)});
    request("/requests/origins").then(body=>{if(active)setOrigins((body.items||[]) as Row[])})
      .catch(()=>{if(active)setOriginsError(true)});
    return()=>{active=false};
  },[request]);
  return <div className="modal-backdrop" role="presentation"><form className="panel-card profile-form workspace-modal" onSubmit={onSubmit}>
    <header><div><span className="section-kicker">SOLICITUD ENTRE ENTIDADES</span><h2>Nueva solicitud</h2></div><button type="button" className="modal-close" onClick={onClose} aria-label="Cerrar">×</button></header>
    {loadError&&<p className="workspace-inline-error">{loadError}</p>}
    <label>Entidad y servicio *<select name="oferta_id" required disabled={loading||Boolean(loadError)}><option value="">{loading?"Cargando ofertas…":"Selecciona una oferta"}</option>
      {options.map(item=><option key={String(item.oferta_id)} value={String(item.oferta_id)}>{String(item.entidad)} — {String(item.servicio)} — {money(item.precio)}</option>)}
    </select></label>
    <label>Asunto *<input name="asunto" maxLength={250} required/></label>
    <label>Detalle *<textarea name="mensaje" rows={6} maxLength={5000} required/></label>
    <div className="form-pair"><label>Solicitud de origen (opcional)
      <select name="solicitud_origen_id" value={originId} onChange={event=>setOriginId(event.target.value)} disabled={originsError}>
        <option value="">Ninguna: solicitud independiente</option>
        {origins.map(item=><option key={String(item.id)} value={String(item.id)}>{String(item.folio)} — {String(item.asunto||"Solicitud")}</option>)}
      </select>
      {originsError&&<small>No fue posible cargar solicitudes previas; puedes crear una solicitud independiente.</small>}
    </label><label>Relación<select name="relacion_tipo" disabled={!originId}><option value="DERIVACION">Derivación</option><option value="DEPENDENCIA">Dependencia</option><option value="ANTECEDENTE">Antecedente</option></select></label></div>
    <div className="modal-actions"><button type="button" className="button button-secondary" onClick={onClose}>Cancelar</button>
      <button className="button button-primary" disabled={loading||Boolean(loadError)||!options.length}>Crear solicitud</button></div>
  </form></div>;
}
function DetailModal({data,entityId,canOperate,busy,onClose,onStatus}:{data:Row;entityId:number;canOperate:boolean;busy:boolean;onClose:()=>void;onStatus:(id:number,status:string,message?:string)=>Promise<void>}){const row=data.solicitud as Row,documents=(data.documentos||[]) as Row[],history=(data.historial||[]) as Row[];const isDestination=Number(row.entidad_destino_id)===entityId,canStart=canOperate&&Boolean(row.venta_id==null)&&isDestination&&row.estado==="RECIBIDA_ENTIDAD",canComplete=canOperate&&Boolean(row.venta_id==null)&&isDestination&&["RECIBIDA_ENTIDAD","EN_PROCESO"].includes(String(row.estado)),canCancel=canOperate&&Boolean(row.venta_id==null)&&!isDestination&&row.estado==="RECIBIDA_ENTIDAD";return <div className="modal-backdrop" role="presentation"><section className="panel-card workspace-modal workspace-detail"><header><div><span className="section-kicker">{String(row.numero_publico)}</span><h2>{String(row.asunto||row.servicio)}</h2><p>{String(row.entidad_origen||"Persona solicitante")} → {String(row.entidad_destino)}</p></div><button className="modal-close" onClick={onClose}>×</button></header><div className="workspace-detail-grid"><section><h3>Detalle</h3><p>{String(row.descripcion||"Sin descripción adicional.")}</p>{Boolean(row.respuesta)&&<div className="workspace-response"><strong>Respuesta de la entidad</strong><p>{String(row.respuesta)}</p><small>Entregada {dateTimeCL(row.entregada_en)}</small></div>}<dl><div><dt>Estado</dt><dd>{String(row.estado).replaceAll("_"," ")}</dd></div><div><dt>Servicio</dt><dd>{String(row.servicio)}</dd></div><div><dt>SLA</dt><dd>{row.sla_vence_en?dateTimeCL(row.sla_vence_en):"Sin SLA"}</dd></div><div><dt>Valor referencial</dt><dd>{money(row.total)}</dd></div></dl></section><section><h3>Documentos</h3>{documents.length?documents.map(item=><p key={String(item.id)}>{String(item.tipo)} · {String(item.estado)}</p>):<p>No hay documentos asociados.</p>}<h3>Historial</h3><ol className="workspace-history">{history.map((item,index)=><li key={index}><strong>{String(item.estado_destino).replaceAll("_"," ")}</strong><small>{dateTimeCL(item.creado_en)}</small><p>{String(item.motivo||"")}</p></li>)}</ol></section></div>{(canStart||canComplete||canCancel)&&<form className="workspace-detail-actions" onSubmit={event=>{event.preventDefault();const form=new FormData(event.currentTarget),status=String(form.get("estado")),message=String(form.get("mensaje")||"");void onStatus(Number(row.id),status,message)}}><label>Acción<select name="estado">{canStart&&<option value="EN_PROCESO">Iniciar gestión</option>}{canComplete&&<option value="COMPLETADA">Completar y entregar respuesta</option>}{canCancel&&<option value="CANCELADA">Cancelar solicitud</option>}</select></label><label>Respuesta u observación<textarea name="mensaje" rows={3}/></label><button className="button button-primary" disabled={busy}>Guardar estado</button></form>}</section></div>}