{! This parameter declarations makes it possible to validate expressions in the template !}
{@java.util.List<org.acme.qute.Quark> quarks}
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Qute & Quarks</title>
        <style>
            .quarks {
                position: relative;
                height: 500px;
                width: 100%;
            }

            .quark {
                position: absolute;
                margin: 5px;
                display: inline-block;
                border-radius: 50%;
                text-align: center;
                vertical-align: middle;
                font-weight: bold;
                color: white;
                line-height: 75px;
                font-size: 12px;
            }

        </style>
    </head>
    <body>
    <h1>Qute & Quarks</h1>

    <p>Welcome to our Qute subatomic-particles generator.</p>

    <p>
        <a href="/qute/quarks" onClick="fetch('/qute/quarks/add', \{method: 'POST'});">Generate a new quark</a>
    </p>

    <div class="quarks">
        {#for quark in quarks}
        <div class="quark" style="width: 75px; height: 75px; top: {quark.position}%; left: {quark.position}%; background-color: {quark.color.hex}">
            <span>{quark.flavor.toString.toLowerCase}</span>
        </div>
        {/for}
    </div>
    </body>
    </html>
