<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title th:text="${applicationForm.name}"></title>
    <style>
        body {
            font-family: 'Times New Roman', Times, serif;
            line-height: 1.4;
            margin: 40px;
            color: #333;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
        }

        header img.logo {
            max-height: 80px;
            margin-bottom: 10px;
        }

        header h1 {
            font-size: 1.8em;
            letter-spacing: 1px;
            margin: 0;
        }

        .meta {
            margin-bottom: 30px;
        }

        .meta .field {
            margin-bottom: 5px;
        }

        .meta label {
            font-weight: bold;
            display: inline-block;
            width: 150px;
        }

        .contract-section {
            margin-bottom: 25px;
        }

        .contract-section h2 {
            font-size: 1.3em;
            border-bottom: 1px solid #aaa;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }

        .form-section {
            margin-bottom: 30px;
        }

        .form-section h3 {
            font-size: 1.2em;
            color: #444;
            margin-bottom: 10px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }

        .form-section p.description {
            font-style: italic;
            color: #666;
            margin: 5px 0 15px;
        }

        .form-element {
            margin-bottom: 20px;
            margin-left: 20px;
        }

        .form-element h4 {
            font-size: 1.1em;
            margin-bottom: 5px;
        }

        .form-element p.description {
            font-style: italic;
            color: #666;
            margin: 5px 0 10px;
        }

        footer {
            text-align: center;
            font-size: 0.9em;
            color: #666;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<header>
    <h1 th:text="${applicationForm.name}"></h1>
</header>

<div class="meta">
    <div class="field">
        <label>ID:</label>
        <span th:text="${applicationForm.id}"></span>
    </div>
    <div class="field">
        <label>Erstellt von:</label>
        <span th:text="${applicationForm.createdBy.name}"></span>
    </div>
    <div class="field">
        <label>Erstellt am:</label>
        <span th:text="${#temporals.format(applicationForm.createdAt, 'dd.MM.yyyy')}"></span>
    </div>
    <div class="field">
        <label>Organisation:</label>
        <span th:text="${applicationForm.organizationId}"></span>
    </div>
</div>

<div class="contract-section">
    <h2>Formularelemente</h2>
    <div th:each="section : ${applicationForm.formElementSections}" class="form-section">
        <h3 th:text="${section.title}"></h3>
        <p class="description" th:if="${section.description}" th:text="${section.description}"></p>
        
        <div th:each="elem : ${section.formElements}" class="form-element">
            <h4 th:text="${elem.title}"></h4>
            <p class="description" th:if="${elem.description}" th:text="${elem.description}"></p>

            <ul>
                <li th:each="option : ${elem.options}" th:if="${option.value == 'true'}" th:text="${option.label}"></li>
            </ul>
            <p th:if="${elem.options.?[value == 'true'].isEmpty()}">Keine Auswahl getroffen</p>
        </div>
    </div>
</div>

<footer>
    <p>Dieses Dokument wurde automatisch erzeugt und ist ohne Unterschrift gültig.</p>
</footer>
</body>
</html>
