<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{fragments/header :: header-css}"/>
</head>
<body>

<div th:replace="~{fragments/header :: header}"/>

<script type="text/javascript" th:src="@{/js/jwt.js}"></script>


<div class="container mt-3">

    <div class="alert alert-info alert-dismissible fade show">
        <div>
        <p>
            Decode or encode a JWT some of the exercises need to encode or decode a new token
        </p>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="form-group">
            <label for="token"><strong>Encoded</strong></label>
            <form id="decodeForm">
            <textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="token" name="token"
                      rows="4"
                      placeholder="Paste token here" spellcheck="false"></textarea>
            </form>
        </div>
        <form id="encodeForm">
            <div class="form-group mt-2">
                <label><strong>Decoded</strong></label>
                <div class="row">
                    <div class="col-xs-6 col-md-5">Header</div>
                    <div class="col-xs-6 col-md-7">Payload</div>
                </div>
                <div class="row">
                    <div class="col-xs-6 col-md-5">
                    <textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="header"
                              name="header"
                              rows="12"></textarea>
                    </div>
                    <div class="col-xs-6 col-md-7">
                    <textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="payload"
                              name="payload"
                              rows="12"></textarea>
                    </div>
                </div>
            </div>
        </form>

        <div class="input-group input-group-sm mb-3 mt-3">
            <span class="input-group-text" id="inputGroup-sizing-sm">Secret key</span>
            <input type="text" class="form-control" id="secretKey" placeholder="Enter your secret key" aria-describedby="inputGroup-sizing-sm">
        </div>

        <div class="input-group mt-2">
            <h4 id="signatureValid">Invalid signature</h4>
        </div>


    </div>


</div>
</body>
</html>
