<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Kalkulator</title>
<link rel="stylesheet" type="text/css" th:href="@{/styl.css}">
</head>
<body>
<h1>Kalkulator</h1>

<form method="post" class="kalkulator">
<input type="number" name="liczba1" th:value="${param.liczba1}">
<select name="operacja">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" name="liczba2" th:value="${param.liczba2}">
<br>
<button>Oblicz</button>
</form>

<div th:if="${wynik != null}" class="wynik">
	<span th:text="${param.liczba1}">2</span>
    <span th:text="${param.operacja}">+</span>
    <span th:text="${param.liczba2}">3</span>
    =
    <strong th:text="${wynik}">5</strong>
</div>

<section th:if="${historia != null and !historia.isEmpty()}">
<h2>Historia działań</h2>
<ul>
    <li th:each="element: ${historia}" th:text="${element}">2 + 2 = 4</li>
</ul>
</section>

<div><a th:href="@{/historia.json}">historia JSON</a></div>
<div><a th:href="@{/historia.txt}">historia TXT</a></div>
<div><a th:href="@{/}">wróć do strony głównej</a></div>

</body>
</html>
