<?php
require_once 'config.php';
require_once 'functions.php';

// Fetch issues
$issues = get_issues($pdo, $lang_id);

include 'header.php';
?>

<div class="row">
    <div class="col-md-12">
        <h1 class="page-header">
            <?= ($lang_id == 1) ? 'Arşiv' : 'Archive' ?>
            <small><?= count($issues) ?> <?= ($lang_id == 1) ? 'Sayı' : 'Issues' ?></small>
        </h1>
    </div>
</div>

<style>
    .issue-card {
        display: block;
        position: relative;
        width: 100%;
        padding-top: 140%; /* Aspect ratio roughly matching A4/Magazine */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 4px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
        text-decoration: none !important;
        margin-bottom: 30px;
        transition: transform 0.2s;
    }
    .issue-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    }
    .issue-card-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%; /* Bottom half */
        display: flex;
        align-items: center; /* Center vertically in the bottom half */
        justify-content: center;
        text-align: center;
        padding: 15px;
    }
    .issue-date {
        color: white; /* Assuming blue background, white text looks best */
        font-family: 'Merriweather', serif;
        font-size: 18px;
        font-weight: bold;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .issue-number {
        display: block;
        color: rgba(255,255,255,0.8);
        font-family: 'PT Sans', sans-serif;
        font-size: 14px;
        margin-top: 5px;
    }
</style>

<div class="row">
    <?php 
        $coverImage = ($lang_id == 1) ? 'tr-cover.jpg' : 'en-cover.jpg';
    ?>
    <?php foreach ($issues as $issue): ?>
    <div class="col-sm-6 col-md-3">
        <a href="issue.php?id=<?= $issue['id'] ?>" class="issue-card" style="background-image: url('<?= $coverImage ?>');">
            <div class="issue-card-overlay">
                <div>
                    <div class="issue-date">
                        <?= htmlspecialchars($issue['issueDate']) ?>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <?php endforeach; ?>
</div>

<?php include 'footer.php'; ?>
