---
import { getCollection } from "astro:content";
import BaseHead from "../../components/BaseHead.astro";
import Footer from "../../components/Footer.astro";
import FormattedDate from "../../components/FormattedDate.astro";
import Header from "../../components/Header.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";



const posts = (await getCollection('homelab')).sort(
	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
);
const servers = (await getCollection('servers'));
---

<!doctype html>
<html lang="en">
	<head>
		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
		<style>
			main {
				width: 100%;
			}
			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 2rem;
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li {
				width: 100%;
			}
			ul li * {
				text-decoration: none;
				transition: 0.2s ease;
			}

			ul li img {
				margin-bottom: 0.5rem;
				border-radius: 12px;
			}
			ul li a {
				display: block;
			}
			.title {
				margin: 0;
				color: rgb(0,255,159);
				line-height: 1;
			}
			.date {
				margin: 0;
				color: rgb(var(--gray));
			}
			ul li a:hover h4,
			ul li a:hover .date {
				color: rgb(var(--accent));
			}
			ul a:hover img {
				box-shadow: var(--box-shadow);
			}
			@media (max-width: 720px) {
				ul {
					gap: 0.5em;
				}
				ul li {
					width: 100%;
					text-align: center;
				}

			}
      site_header{
        text-align: center;
      }
      left{
        width: 75%;
        text-align: center;

        
      }
      right{
        width: 25%;
        text-align: center;

      }

      #column{
        float:left;
      }
      box{
        display: flex;
      }
      box left,right{
        border-color: white;
        border-width: 0.2em;
        border-style: solid;
        border-radius: 1em;
        margin: 0.2em;
        padding: 0.5em;
      }

		</style>
	</head>
	<body>
		<Header />
		<main>
      <site_header>
        <h2>All bout the homelab!</h2>    
      </site_header>
      <box>
        <left class="column">
          <h3>What is in my homelab now?</h3>
          <p>
            So my current homelab has gotten quite extensive, which honestly is a pain because electricity is expensive as hell.
          </p>
          <p>I have waaaaay too many servers, and they are not at all used to their full capabilites. But i am a tinkerer at heart.
            Owning a proxmox cluster with 6 nodes, or a 5 node K3S cluster is just fun to me. It doesn't really matter that it costs money, it is a hobby. So without further ado, 
            let me explain each server, and what it is currently being used for.
          </p>
          <p>As you can probably tell, i use greek mythology for the naming scheme of physical machines :P</p>
          <section>
            <ul>
              {
                servers.map((s) => (
                  <li>
                    <a href={`/homelab/servers/${s.slug}/`}>
                      <h5 class="title">🖥️ {s.data.title}</h5>
                    </a>
                  </li>
                ))
              }
            </ul>
          </section>
          
        </left>
        <right class="column">
          <h3>Homelab blog:</h3>
          <section>
            <ul>
              {
                posts.length == 0 ? <p>Wow, such empty</p> : 
                posts.sort((a,b) => {
                  return b.data.pubDate.getTime() - a.data.pubDate.getTime()
                }).map((post) => (
                  <li>
                    <a href={`/homelab/${post.slug}/`}>
                      <h5 class="title">{post.data.title}</h4>
                      <p class="date">
                        <FormattedDate date={post.data.pubDate} />
                      </p>
                    </a>
                  </li>
                ))
              }
            </ul>
          </section>
        </right>
      </box>
      
		</main>
		<Footer />
	</body>
</html>