<?php
    require_once('.htac_header.php');
    require_once('.hta_config/db_config.php');
?>

<section class="container-zz mx-auto">
    <h1 class="grid-container" style="font-size: 30px; font-weight: bold; padding-top: 20px; padding-bottom: 10px; border-bottom: 4px solid #FFF; margin-bottom: 20px;">SiliconPin - Tools</h1>
    <div class="grid-container" style="display: flex; flex-direction: row; overflow-x: auto; margin-bottom: 20px;">
        <a href="/tools/type/?type=image" class="type-button">Image</a>
        <a href="/tools/type/?type=text" class="type-button">Text</a>
        <a href="/tools/type/?type=html" class="type-button">HTML</a>
        <a href="/tools/type/?type=color" class="type-button">Color</a>
        <a href="/tools/type/?type=info" class="type-button">Info</a>
        <a href="/tools/type/?type=encrypt-decrypt" class="type-button">Encrypt / Decrypt</a>
    </div>
    <div class="grid-container">
    <?php
        try {
            $conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $stmt = $conn->prepare("SELECT * FROM api_tools WHERE `type` = :type");
            $stmt->bindParam(':type', $_GET['type'], PDO::PARAM_STR);
            $stmt->execute();
            $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
            // var_dump($rows);
            foreach($rows as $row){
                // echo $row['name'].'<br>';
                if($row['status']==1){
                    $link_button = '<a href="/tools/'.$row['slug'].'" ><p style="background-color: #6d6d6d; padding: 6px 0px 6px 0px; border-radius: 10px;">'.$row['name'].'</p></a>';
                } else{
                    $link_button = '<h2><p style="background-color: #6d6d6d; padding: 6px 0px 6px 0px; border-radius: 10px;">'.$row['name'].'</p></h2>';
                }
                echo '
                    <div class="grid-item">
                        <p class="line-clamp-2" style="text-align: justify;" >'.$row['description'].'</p>
                        '.$link_button.'
                    </div>';
            }
        } catch (PDOException $e) {
            $in_page_message = "<p class='text-danger'>Error: " . $e->getMessage() . "</p>";
        }
    ?>
    </div>
</section>

<style>
    .type-button{
        background-color: #3d3d3d;
        padding: 10px 20px 10px 20px;
        border-radius: 8px;
    }
    .container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
    .mx-auto{margin-left:auto;margin-right:auto;
        padding: 10px;
    }
    .my-20{margin-top:5rem;margin-bottom:5rem}
    .grid-container {
        display: grid;
        grid-gap: 10px;
        margin: 0 auto;
        max-width: 1200px;
    }

    .grid-item {
        background-color: #3d3d3d;
        padding: 10px;
        text-align: center;
        border-radius: 15px;
    }

    /* Mobile (up to 600px) */
    @media only screen and (max-width: 600px) {
        .grid-container {
        grid-template-columns: repeat(1, 1fr);
        }
    }

    /* Medium (601px - 1024px) */
    @media only screen and (min-width: 601px) and (max-width: 1024px) {
        .grid-container {
        grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Large (1025px and above) */
    @media only screen and (min-width: 1025px) {
        .grid-container {
        grid-template-columns: repeat(3, 1fr);
        }
    }
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
        overflow: hidden;   
        }
        .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;  
        overflow: hidden;
        }
        #dynamicContent > img{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
            width: 100%;
            height: 200px;
        }
</style>