<main class="bd-main">
    <!-- START CONTAINER -->
    <div class="bd-side-background"></div>
    <div class="bd-main-container container">
        <div class="bd-duo">
            <div class="bd-lead">
                <!-- Start Row -->
                <div class="row">
                    <section class="section">
                        <div class="tabs">
                            <ul class="tabs-menu">
                                <li class="is-active" data-target="first-tab"><a>Popular</a></li>
                                <li data-target="second-tab"><a>Months Pop</a></li>
                                <li data-target="third-tab"><a>New</a></li>
                                <li data-target="forth-tab"><a>Updated</a></li>
                                <li data-target="fifth-tab"><a>Random</a></li>
                            </ul>
                        </div>
                        <!-- Start Panel -->

                        <!-- Pop Pastes -->
                        <div class="tab-content" id="first-tab">
                            <div class="panel panel-default">
                                <h1 class="title is-4">Popular Pastes</h1>
                                <div class="columns is-multiline">
                                    <?php foreach ($popular_pastes as $paste): ?>
                                        <div class="column is-half">
                                            <div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-content" style="overflow: hidden">
                                                            <p class="title is-5">
                                                                <a href="<?= urlForPaste($paste) ?>"
                                                                   title="<?= pp_html_escape($paste->title) ?>"> <?= pp_html_escape($paste->title) ?> </a>
                                                            </p>
                                                            <p class="subtitle is-6">
                                                                <a href="<?= urlForMember($paste->user) ?>"><?= pp_html_escape($paste->user->username) ?></a>
                                                                <br>
                                                                <time datetime="<?= $paste['time'] ?>"><?= $paste['friendly_time'] ?></time>
                                                            </p>
                                                            <?php
                                                            if (count($paste['tags']) !== 0) {
                                                                echo tagsToHtml($paste['tags']);
                                                            } else {
                                                                echo ' <span class="tag is-warning">No tags</span>';
                                                            }
                                                            ?>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <br>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                        <!-- mPop Pastes -->
                        <div class="tab-content" id="second-tab">
                            <div class="panel panel-default">
                                <h1 class="title is-4">This month's popular pastes</h1>
                                <div class="columns is-multiline">
                                    <?php foreach ($monthly_popular_pastes as $paste): ?>
                                        <div class="column is-half">
                                            <div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-content" style="overflow: hidden">
                                                            <p class="title is-5">
                                                                <a href="<?= urlForPaste($paste) ?>"
                                                                   title="<?= pp_html_escape($paste->title) ?>"> <?= pp_html_escape($paste->title) ?> </a>
                                                            </p>
                                                            <p class="subtitle is-6">
                                                                <a href="<?= urlForMember($paste->user) ?>"><?= pp_html_escape($paste->user->username) ?></a>
                                                                <br>
                                                                <time datetime="<?= $paste['time'] ?>"><?= $paste['friendly_time'] ?></time>
                                                            </p>
                                                            <?php
                                                            if (count($paste['tags']) !== 0) {
                                                                echo tagsToHtml($paste['tags']);
                                                            } else {
                                                                echo ' <span class="tag is-warning">No tags</span>';
                                                            }
                                                            ?>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <br>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>

                        <!-- New Pastes -->
                        <div class="tab-content" id="third-tab">
                            <div class="panel panel-default">
                                <h1 class="title is-4">New Pastes</h1>
                                <div class="columns is-multiline">
                                    <?php foreach ($recent_pastes as $paste): ?>
                                        <div class="column is-half">
                                            <div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-content" style="overflow: hidden">
                                                            <p class="title is-5">
                                                                <a href="<?= urlForPaste($paste) ?>"
                                                                   title="<?= pp_html_escape($paste->title) ?>"> <?= pp_html_escape($paste->title) ?> </a>
                                                            </p>
                                                            <p class="subtitle is-6">
                                                                <a href="<?= urlForMember($paste->user) ?>"><?= pp_html_escape($paste->user->username) ?></a>
                                                                <br>
                                                                <time datetime="<?= $paste['time'] ?>"><?= $paste['friendly_time'] ?></time>
                                                            </p>
                                                            <?php
                                                            if (count($paste['tags']) !== 0) {
                                                                echo tagsToHtml($paste['tags']);
                                                            } else {
                                                                echo ' <span class="tag is-warning">No tags</span>';
                                                            }
                                                            ?>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <br>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>

                        <!-- Updated Pastes -->
                        <div class="tab-content" id="forth-tab">
                            <div class="panel panel-default">
                                <h1 class="title is-4">Recently Updated Pastes</h1>
                                <div class="columns is-multiline">
                                    <?php foreach ($updated_pastes as $paste): ?>
                                        <div class="column is-half">
                                            <div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-content" style="overflow: hidden">
                                                            <p class="title is-5">
                                                                <a href="<?= urlForPaste($paste) ?>"
                                                                   title="<?= pp_html_escape($paste->title) ?>"> <?= pp_html_escape($paste->title) ?> </a>
                                                            </p>
                                                            <p class="subtitle is-6">
                                                                <a href="<?= urlForMember($paste->user) ?>"><?= pp_html_escape($paste->user->username) ?></a>
                                                                <br>
                                                                <time datetime="<?= $paste['time'] ?>"><?= $paste['friendly_update_time'] ?></time>
                                                            </p>
                                                            <?php
                                                            if (count($paste['tags']) !== 0) {
                                                                echo tagsToHtml($paste['tags']);
                                                            } else {
                                                                echo ' <span class="tag is-warning">No tags</span>';
                                                            }
                                                            ?>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <br>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>

                        <!-- Random Pastes -->
                        <div class="tab-content" id="fifth-tab">
                            <div class="panel panel-default">
                                <h1 class="title is-4">Random Pastes</h1>
                                <div class="columns is-multiline">
                                    <?php foreach ($random_pastes as $paste): ?>
                                        <div class="column is-half">
                                            <div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-content" style="overflow: hidden">
                                                            <p class="title is-5">
                                                                <a href="<?= urlForPaste($paste) ?>"
                                                                   title="<?= pp_html_escape($paste->title) ?>"> <?= pp_html_escape($paste->title) ?> </a>
                                                            </p>
                                                            <p class="subtitle is-6">
                                                                <a href="<?= urlForMember($paste->user) ?>"><?= pp_html_escape($paste->user->username) ?></a>
                                                                <br>
                                                                <time datetime="<?= $paste['time'] ?>"><?= $paste['friendly_time'] ?></time>
                                                            </p>
                                                            <?php
                                                            if (count($paste['tags']) !== 0) {
                                                                echo tagsToHtml($paste['tags']);
                                                            } else {
                                                                echo ' <span class="tag is-warning">No tags</span>';
                                                            }
                                                            ?>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <br>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    const tabSystem = {
        init() {
            document.querySelectorAll('.tabs-menu').forEach(tabMenu => {
                Array.from(tabMenu.children).forEach(child => {
                    child.addEventListener('click', () => {
                        tabSystem.toggle(child.dataset.target);
                    });
                    if (child.className.includes('is-active')) {
                        tabSystem.toggle(child.dataset.target);
                    }
                });
            });
        },
        toggle(targetId) {
            document.querySelectorAll('.tab-content').forEach(contentElement => {
                contentElement.style.display = contentElement.id === targetId ? 'block' : 'none';
                document.querySelector(`[data-target="${contentElement.id}"]`).classList[contentElement.id === targetId ? 'add' : 'remove']('is-active');
            })
        },
    };
    // use it
    tabSystem.init()
</script>