export function modal(){

    var html = `<!-- Modal -->
    <div class="modal fade" id="addU" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    
                    </button>
                     <h4 class="modal-title" id="myModalLabel">Añadir Nuevos Datos</h4>
    
                </div>
                <div class="modal-body">
                    <div role="tabpanel">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#NuevoUsuarioTab" aria-controls="NuevoUsuarioTab" role="tab" data-toggle="tab">Nuevo Usuario</a>
    
                            </li>
                            <li role="presentation"><a href="#NuevaNotaTab" aria-controls="NuevaNotaTab" role="tab" data-toggle="tab">Nueva Nota</a>
    
                            </li>
                            <li role="presentation"><a href="#NuevaTarjetaDeCréditoTab" aria-controls="NuevaTarjetaDeCréditoTab" role="tab" data-toggle="tab">Nueva Tarjeta de Crédito</a>
    
                            </li>
                            <li role="presentation"><a href="#NuevaCuentaBancariaTab" aria-controls="NuevaCuentaBancariaTab" role="tab" data-toggle="tab">Nueva Cuenta Bancaria</a>
    
                            </li>
                        </ul>
                        </br>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="NuevoUsuarioTab">
                              <div class="form-group">
                                <label for="DescripcionModal">Descripción</label>
                                <input type="text" class="form-control" id="DescripcionModal" placeholder="Introduce Descripción">
                              </div>
                              <div class="form-group">
                                <label for="URLModal">URL</label>
                                <input type="url" class="form-control" id="URLModal" placeholder="URL">
                              </div>
                              <div class="form-group">
                                <label for="UsuarioModal">Usuario</label>
                                <input type="text" class="form-control" id="UsuarioModal" placeholder="Introduce Usuario">
                              </div>
                              <div class="form-group">
                                <label for="ContraseñaModal">Contraseña</label>
                                <div class="input-group ">
                                  <input type="password" class="form-control" id="ContraseñaModal" placeholder="Introduce Contraseña" aria-describedby="sizing-addon1">
                                  <span class="input-group-btn">
                                    <div class="btn-group">
                                      <button type="button" id="opcionesContraseñaa" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                      <span class="sr-only">Desplegar menú</span>
                                      </button>
                                      <ul class="dropdown-menu" role="menu">
                                      <li><a id = "generarContraseña" >Generar Contraseña</a></li>
                                      <li><a id = "verContraseña">Ver</a></li>
                                      </ul>
                                    </div>
                                  </span>
                                </div>
                              </div>
                            </div>
  
                            <div role="tabpanel" class="tab-pane" id="NuevaNotaTab">
                              <div class="form-group">
                                <label for="NombreNota">Nombre</label>
                                <input type="text" class="form-control" id="NombreNota" placeholder="Introduce Nombre">
                              </div>
                              <div class="form-group">
                                <label for="textoNota">Texto Nota</label>
                                <textarea class="form-control" id="textoNota" rows="3"></textarea>
                              </div>
                            </div>
  
                            <div role="tabpanel" class="tab-pane" id="NuevaTarjetaDeCréditoTab">
                              <div class="form-group">
                                <label for="nombreEntidad">Nombre Entidad</label>
                                <input type="text" class="form-control" id="nombreEntidad" placeholder="Introduce Nombre de la Entidad/Banco">
                              </div>
                              <div class="form-group">
                                <label for="numTarjeta">Número tarjeta</label>
                                <input type="text" class="form-control" id="numTarjeta" placeholder="Introduce el número de la tarjeta" maxlength=16>
                              </div>
                              <div class="form-group">
                                <label for="fechaCaducidad">Fecha de Caducidad</label>
                                <input type="date" class="form-control" id="fechaCaducidad" placeholder="Introduce la fecha de caducidad">
                              </div>
                              <div class="form-group">
                                <label for="nombreTitular">Nombre Titular</label>
                                <input type="text" class="form-control" id="nombreTitular" placeholder="Introduce Nombre del Titular">
                              </div>
                              <div class="form-group">
                                <label for="codigoDeSeguridad">Código de seguridad</label>
                                <input type="text" class="form-control" id="codigoDeSeguridad" placeholder="Introduce el código de seguridad" maxlength=3>
                              </div>
                            </div>

                              
                            <div role="tabpanel" class="tab-pane" id="NuevaCuentaBancariaTab">
                              <div class="form-group">
                                <label for="nombreEntidadBancaria">Nombre Entidad</label>
                                <input type="text" class="form-control" id="nombreEntidadBancaria" placeholder="Introduce Nombre de la Entidad/Banco">
                              </div>
                              <div class="form-group">
                                <label for="IBAN">Número de cuenta (IBAN)</label>
                                <input type="text" class="form-control" id="IBAN" placeholder="Introduce el número de la cuenta Bancaria" maxlength=24>
                              </div>
                              <div class="form-group">
                                <label for="usuarioBancario">Usuario Banca Online</label>
                                <input type="text" class="form-control" id="usuarioBancario" placeholder="Introduce el usuario de la Banca Online">
                              </div>
                              <div class="form-group">
                                <label for="contraseñaBancario">Contraseña Banca Online</label>
                                <input type="password" class="form-control" id="contraseñaBancario" placeholder="Introduce la contraseña de la Banca Online">
                              </div>
                            </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="button" id="añadirModal" class="btn btn-primary save">Guardar Cambios</button>
                </div>
            </div>
        </div>
    </div>`
  
    return html;
  }