<!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 src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script defer src="js/authentication/script.js" type="module"></script>
</head>
<body id="body-id">
<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>
<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">Nuova luce</h5>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
</div>
<form method="POST" id="search-form">
<div class="modal-body">
<div>
<label for="#luogoLuce" class="form-label">Luogo</label>
<!-- <input type="text" class="form-control" id="luogoLuce" aria-describedby="luogoLuceHelp" required> -->
<select class="form-select" id="luogoLuce" name="luogo">
<option value="unselected" selected>Scegli un luogo</option>
<option value="cucina">Cucina</option>
<option value="camera1">Camera 1</option>
<option value="camera2">Camera 2</option>
<option value="bagno">Bagno</option>
<option value="ingresso">Ingresso</option>
<option value="soggiorno">Soggiorno</option>
<option value="giardino">Giardino</option>
<option value="garage">Garage</option>
<option value="altro">Altro</option>
</select>
<div id="luogoLuceHelp" class="form-text">Scegli la stanza in cui si trova la tua
luce.</div>
<label for="#scelta-porta-in" class="more-margin-top form-label">Porta di
attivazione</label>
<select class="form-select scelta-porta-in" id="scelta-porta-in" name="porta-in">
<option value="unselected">Scegli una porta di attivazione</option>
<!-- <option value="in0">in0</option> -->
<!-- TODO js populate the options with the available sensors -->
</select>
<div class="form-text">Scegli una porta di attivazione della luce.</div>
<label for="#scelta-porta-out" class="more-margin-top form-label">Porta della luce</label>
<select class="form-select scelta-porta-out" id="scelta-porta-out" name="porta-out">
<option value="unselected">Scegli la porta della luce</option>
<!-- <option value="in0">in0</option> -->
<!-- TODO js populate the options with the available sensors -->
</select>
<div class="form-text">Scegli la porta in cui si trova la luce.</div>
</div>
<div class="invisible" id="nuovaStanzaDIV">
<label for="nuovaStanza" class="form-label">Nuova stanza</label>
<input type="text" class="form-control" id="nuovaStanza" aria-describedby="nuovaStanzaHelp">
<div id="nuovaStanzaHelp" class="form-text">Inserisci il nome della nuova stanza.</div>
</div>
</div>
<div class="modal-footer justify-content-around">
<button type="button" class="btn btn-secondary w-25" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary w-25">Add</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>