@import com.example.demo.domain.Idn
@import com.example.demo.domain.Idn2
@import org.springframework.data.domain.Page
@import java.util.ArrayList
@import java.util.List
@param com.example.demo.domain.Idn idn_test
@param String image_string_1
@param String test_string

@param ArrayList<Idn>  idn_list
@param ArrayList<Idn2> img_list

<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kartika">
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js"></script>

<body>
<style>
    h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
    p, body {font-family: "Kartika", sans-serif}
    body {
        margin: 0;
        background-color: #1C1C1C;
    }
    .header {
        display: -webkit-flex;
        display: flex;
    }

    .topnav {
        overflow: hidden;
        background-color: steelblue;
    }
    * {
        box-sizing: border-box;
    }

    .column {
        float: left;
        width: 33.33%;
        padding: 25px;
        background-color: rgba(4, 170, 109, 0.1);
    }
    h2 {text-align: center;}

    /* Clearfix (clear floats) */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

</style>
<div class="topnav">
    <h2>IDN Viewer: Tools</h2>
</div>
<p> IDN List size: ${idn_list.size()}! </p>


<div class="column">
    <model-viewer
            alt="Spacesuit"
            src="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb"
            camera-controls
            auto-rotate>
    </model-viewer>
</div>
@for(int i = 0; i < 65; i++)
<div class="row">
    <div class="column">
        <p style="color:ghostwhite;"> Name: ${idn_list.get(i).getName()} <br>
        ID: ${idn_list.get(i).getId()} <br>
        Ver: ${idn_list.get(i).getModifiedInVersion()} <br>
        Date Created: ${img_list.get(i).date_created} <br>
        Date Modified: ${img_list.get(i).date_modified} </p>
    </div>
    <div class="column">
    <img src="${img_list.get(i).image_str}" alt="${img_list.get(i).id}">
    </div>
</div>
@endfor



</body>
</html>
