<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title id="title">SmartHome</title>
<link rel="icon" href="res/favicon.png">
<!-- link all other useful scripts -->
<!-- link bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- link fontawesome (for icons)-->
<script defer src="https://kit.fontawesome.com/a1635545b7.js" crossorigin="anonymous"></script>
<!-- link my scripts and styles -->
<link rel="stylesheet" href="css/domains.css" type="text/css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script defer src="js/authentication/moment.min.js"></script>
<script defer src="js/authentication/script.js" type="module"></script>
</head>
<body id="body-id">
<div id="alert-message" role="alert" class="alert invisible">
<!-- <div class="d-flex justify-content-around container-fluid">
<i class="fa-solid fa-exclamation-circle fa-4x" aria-hidden="true"></i>
<div>
<h4 class="alert-heading">Attenzione</h4>
<p>Stai registrando uno scenario, termina la registrazione per attivare l'antifurto.</p>
</div>
</div> -->
<!-- any error or confirmation goes here (updated by JS) -->
<!-- alert-danger -->
<!-- alert-success -->
</div>
<h1>Pissir SmartHome</h1>
<!-- <a href="http://$DOMAIN/realms/$REALM/protocol/openid-connect/auth?
response_type=code&
code_challenge=$MY_CODE_CHALLENGE&
code_challenge_method=S256&
client_id=myclient&
redirect_uri=$MY_REDIRECT_URI&
scope=openid&
nonce=a81e1a84-8885-4702-b8d1-f6c5a0d1fc4d&
response_mode=fragment&
state=$MY_STATE" id="my-link">I'm the best at logging in :p</a> -->
<div class="container-fluid table-responsive">
<table class="table table-striped">
<thead>
<tr class="more-margin-top">
<th scope="col">
<h2 class="d-flex justify-content-center">Dominio</h2>
</th>
<th scope="col">
<h2 class="d-flex justify-content-center">Stato</h2>
</th>
<th scope="col">
<h2 class="d-flex justify-content-center">Elimina</h2>
</th>
</tr>
</thead>
<tbody id="table-row-domains">
<!-- row to add a new element -->
<!--<tr>
<th scope="row">
<h4 class="d-flex justify-content-center mt-2">Casa</h4>
</th>
<td class="align-middle">
<div class="switch-container no-box-sizing d-flex justify-content-center">
<div class="toggle-button no-box-sizing">
<div class="inner-circle no-box-sizing"></div>
</div>
</div>
</td>
<td class="d-flex justify-content-center">
<i class="fa-solid fa-trash fa-2x py-2">
</td>
</tr>-->
<tr>
<th scope="row" class="d-flex justify-content-center">
<!-- FIXME show fa-bounce if there's at no light [it moves the button :/] -->
<i class="fa-solid fa-circle-plus fa-2x" data-bs-toggle="modal"
data-bs-target="#domain-modal"></i>
</th>
<td>
<span class="d-flex justify-content-center">Crea un nuovo dominio</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-primary position-absolute bottom-0 end-0" id="button-logout">Logout</button>
<!-- <a class="btn btn-primary position-absolute bottom-0 end-0" href="http://localhost:8080/realms/test00/protocol/openid-connect/logout?id_token_hint=$ID_TOKEN" role="button" id="id-logout">Link</a> -->
<div class="modal fade" id="domain-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Creazione di un nuovo dominio</h5>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
</div>
<form method="POST" id="new-domain-form">
<div class="modal-body" id="modal-body-new-domain">
<label for="#nuovoDominio" class="form-label">Nome del dominio</label>
<input type="text" class="form-control" id="nuovoDominio" aria-describedby="#nuovoDominioHelp" placeholder="Nome del dominio">
<div id="valid-domainName" class="valid-feedback"></div>
<div id="invalid-domainName" class="invalid-feedback"></div>
<!--<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="${nomeServizio}"/>
<label class="form-check-label" for="#${nomeServizio}">
${nomeServizio}
</label>
</div>-->
<!--<fieldset class="is-invalid">
<legend>Scegli uno o piu' servizi</legend>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="${nomeServizio}" id="${nomeServizio}"/>
<label class="form-check-label" for="#${nomeServizio}">
${nomeServizio}
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="${nomeServizio}" id="${nomeServizio2}"/>
<label class="form-check-label" for="#${nomeServizio2}">
${nomeServizio}
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="${nomeServizio}" id="${nomeServizio3}"/>
<label class="form-check-label" for="#${nomeServizio3}">
${nomeServizio}
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="${nomeServizio}" id="${nomeServizio4}"/>
<label class="form-check-label" for="#${nomeServizio4}">
${nomeServizio}
</label>
</div>
</fieldset> -->
<!--<div id="utente0">
<label for="#nuovoUtente" class="form-label">Nuovo utente</label>
<input type="text" class="form-control" id="nuovoUtente" aria-describedby="#nuovoUtenteHelp">
<div id="nuovoUtenteHelp" class="form-text">Inserisci il nome del nuovo utente.</div>
<label for="#passwordUtente" class="form-label">Password utente</label>
<input type="text" class="form-control" id="passwordUtente" aria-describedby="#passwordUtenteHelp">
<div id="passwordUtenteHelp" class="form-text">Inserisci la password del nuovo utente.</div>
</div>-->
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-dark" id="add-user-button">Aggiungi utente</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancel-button">Cancella</button>
<button type="submit" class="btn btn-primary">Crea</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>