<dashboard version="1.1" theme="light" hideTitle="true">
    <!-- Author: Tom de Bruijn ... or uhm... AI... chatGPT/DALL-E !-->
    <!-- LinkedIn: https://www.linkedin.com/in/tcdebruijn/ !-->
    <!-- Prompt 1 : generate the header !-->
    <row>
        <panel>
            <html>
                <style>
                    /* set panels to transparent */
                    .dashboard-row .dashboard-panel {
                        background-color: transparent;
                        margin-top: 0;
                    }
                    /* set top bar header to 0 */
                    .dashboard-header {
                          min-height: 0px;
                    }
                    /* set padding beteween html rows to 0 */
                    .dashboard-row .dashboard-panel .panel-body.html, .dashboard-row .dashboard-panel .panel-body.splunk-html {
                        padding: 0px;
                    }
                    .header-container {
                        border-radius: 10px; /* Rounded corners */
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-color: white;
                        padding: 20px;
                    }
                    .header-left, .header-right {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                    .header-left {
                        align-items: flex-start;
                    }
                    .header-right {
                        align-items: flex-end;
                        padding-right: 20px;
                    }
                    .company-name {
                        color: #575756;
                        font-size: 48px;
                        font-weight: bold;
                        padding-bottom: 12px;
                        padding-right: 80px;
                    }
                    .company-tagline {
                        color: #ABABAB;
                        font-size: 26px;
                    }
                    .data-text {
                        color: #575756;
                        font-size: 24px;
                        font-weight: bold;
                        margin-left: 20px;
                    }
                    .img-logo {
                      display: inline-block; /* Display images inline */
                      margin-right: 10px;    /* Spacing between images */
                    }
                    .img-logo:last-child {
                      display: inline-block; /* Display images inline */
                      margin-right: 10px;    /* Spacing between images */
                      margin-left: 25px; /* No left margin for the first tile */
                    }
                    .data-text .separator_1 {
                        margin-left: 10px;
                        margin-right: 10px;
                        color: #F39201;
                    }
                    .data-text .separator_2 {
                        margin-left: 5px;
                        margin-right: 5px;
                        color: #F39201;
                    }
                </style>
                <div class="header-container">
                    <div class="header-left">
                        <div class="img-logo">
                          <!-- Prompt Optional : Generated Images !-->
                          <img src="/static/app/search/Data.png" width="100px" height="100px" alt="Data - DALL E Generated - Tom de Bruijn" />
                          <img src="/static/app/search/DevOps.png" width="100px" height="100px" alt="DevOps - DALL E Generated - Tom de Bruijn" />
                          <img src="/static/app/search/Development.png" width="100px" height="100px" alt="Development - DALL E Generated - Tom de Bruijn" />
                        </div>
                        <span class="data-text">Data   <span class="separator_1"> | </span> DevOps <span class="separator_2"> | </span> Development</span>
                    </div>
                    <div class="header-right">
                        <span class="company-name">CINQ ICT</span>
                        <span class="company-tagline">Net iets meer | net iets anders</span>
                    </div>
                </div>
            </html>
        </panel>
    </row>
    <!-- Prompt 2 : generate the headlines !-->
    <row>
        <panel>
            <html>
                <style>
                    .headline-container {
                        background-color: white; /* White background */
                        border-radius: 10px; /* Rounded corners */
                        padding: 10px 20px; /* Padding around the text */
                        margin: 10px 0; /* Some margin for spacing */
                        text-align: left; /* Centering the text */
                    }
                    .headline-text {
                        color: #58ADDF; /* Blue color */
                        font-size: 16px; /* Font size */
                        font-weight: bold; /* Bold font */
                    }
                </style>
                <div class="headline-container">
                    <span class="headline-text">App Dashboards</span>
                </div>
            </html>
        </panel>
    </row>
    <!-- Prompt 3: dashboard tile links !-->
    <row>
        <html>
            <style>
                .a {
                  width: 25%;
                }
                .tile {
                    display: inline-block;
                    width: 24%; /* Adjust width to distribute evenly */
                    height: 75px;
                    background-color: white;
                    border-radius: 5px;
                    color: #58ADDF;
                    font-weight: bold;
                    font-size: 20px;
                    line-height: 75px; /* Center text vertically */
                    text-align: center;
                    margin-left: 0.45%; /* Space between tiles */
                    margin-right: 0.45%; /* Space between tiles */
                }
                .tile:hover {
                    transition: background-color 0.5s; /* Smooth background color transition */
                    background-color: #ABABAB; /* Light grey background on hover */
                }
                .tile:first-child {
                    margin-left: 0; /* No left margin for the first tile */
                }
                .tile:last-child {
                    margin-right: 0; /* No right margin for the last tile */
                }
            </style>
            <a href="splunk_link_dashboard_1" class="tile">Dashboard 1</a>
            <a href="splunk_link_dashboard_2" class="tile">Dashboard 2</a>
            <a href="splunk_link_dashboard_3" class="tile">Dashboard 3</a>
            <a href="splunk_link_dashboard_4" class="tile">Dashboard 4</a>
        </html>
    </row>
    <!-- Prompt 2 : Copy of previous headline, reuse style attributes !-->
    <row>
        <panel>
            <html>
                <div class="headline-container">
                    <span class="headline-text">Links | Help</span>
                </div>
            </html>
        </panel>
    </row>
    <row>
        <html>
            <style>
                .link-container {
                    background-color: white;
                    border-radius: 8px;
                    padding: 10px;
                }
                .link {
                    color: #58ADDF;
                    font-weight: bold;
                    font-size: 16px;
                    text-align: left;
                    text-decoration: none;
                    display: block; /* Makes each link fill the horizontal space */
                    padding: 5px 10px;
                    transition: background-color 0.5s; /* Smooth background color transition */
                }
                .link:hover {
                    background-color: #ABABAB; /* Light grey background on hover */
                }
            </style>
            <div class="link-container">
              <a href="https://www.linkedin.com/in/tcdebruijn/" class="link">LinkedIn - Tom de Bruijn</a>
              <a href="https://www.cinqict.nl/home" class="link">Home</a>
              <a href="https://www.cinqict.nl/data" class="link">What we do – Data</a>
              <a href="https://www.cinqict.nl/over-cinq" class="link">About CINQ</a>
              <a href="https://www.cinqict.nl/events" class="link">Events</a>
              <a href="https://www.cinqict.nl/podcast" class="link">Podcast</a>
              <a href="https://www.cinqict.nl/blog" class="link">Blog</a>
              <a href="https://www.cinqict.nl/vacatures" class="link">Vacancies</a>
            </div>
        </html>
    </row>
</dashboard>