view and js


<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
>

<head>
    <th:block th:include="~{fragments/head}"></th:block>
</head>
<body>
<div class="container-fluid">
    <header>
        <th:block th:include="~{fragments/navbar}"></th:block>
    </header>

    <main>
        <div class="print-container container-fluid w-50">

            <div class="d-flex justify-content-between align-content-center mt-5 mb-5">
                <h1 class="page-title">Your Choice</h1>

                <div class="button-wrapper d-flex justify-content-between align-content-center">
                    <div class="form-check form-check-inline mr-5">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="viruses"
                               value="option1">
                        <label class="form-check-label" for="viruses">Viruses</label>
                    </div>
                    <div class="form-check form-check-inline mr-5 ml-5">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="capitals"
                               value="option2">
                        <label class="form-check-label" for="capitals">Capitals</label>
                    </div>
                </div>
            </div>
            <div class="content  ">
                <hr class="my-2 mb-3 mt-3 col-md-12 mx-auto"/>

                <h2 class="text-center">Select, what data you want to visualize!</h2>
            </div>
        </div>
    </main>
</div>

<script>
    const role = "[[${model.role}]]";
    console.log(role)
</script>

</body>
</html>