<!DOCTYPE html>
<html lang="en">
<head>
<title>User Profile</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<style>
.collapse {
display: none;
}
.collapse.in {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height,visibility;
-o-transition-property: height,visibility;
transition-property: height,visibility;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(function(){
$("#header").load("fragment/header.html");
$("#footer").load("fragment/footer.html");
});
</script>
</head>
<body>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<!-- https://getbootstrap.com/docs/4.3/components/navs/ -->
<div class="col-3">
<h5>
<!-- TODO: Firstname + Lastname-->
<span>TODO: Firstname + Lastname</span>
</h5>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link" href="#" aria-selected="true">Profile</a>
<a class="nav-link" href="#" aria-selected="false">Security</a>
<a class="nav-link" href="#" aria-selected="false">Services</a>
</div>
</div>
<div class="col-sm-9">
<form>
<p><input type="hidden" th:value="${id}"/></p>
<table class="table table-borderless">
<tr>
<th><label for="title">Title</label></th>
<td><input type="text" placeholder="Title"></td>
</tr>
<tr>
<th><label for="firstname">Vorname</label></th>
<td><input type="text" placeholder="Vorname"></td>
</tr>
<tr>
<th><label for="lastname">Nachname</label></th>
<td><input type="text" placeholder="Nachname"></td>
</tr>
<tr>
<th><label for="email">Email</label></th>
<td><input type="text" placeholder="Email"></td>
</tr>
<tr>
<th><label for="email">Unternehmen</label></th>
<td><input type="text" placeholder="Unternehmen"></td>
</tr>
<tr>
<th><label for="email">Branche</label></th>
<td><input type="text" placeholder="Branche"></td>
</tr>
<tr>
<th><label for="email">Fachgebiete</label></th>
<td><input type="text" placeholder="Fachgebiete"></td>
</tr>
</table>
<p><input type="submit" class="btn btn-primary" value="Update" disabled></p>
</form>
</div>
</div>
</div>
<!-- HEADER & FOOTER -->
<script src="https://transfer.hft-stuttgart.de/js/headfoot.js"></script>
</body>
</html>