{{--
    @foreach ($otherArticles as $article)
        <div class="trending-article mt-4">

            <img src="{{ $article->user && $article->user->avatar
                ? asset('storage/' . $article->user->avatar)
                : asset('images/default-avatar.png') }}"
                class="writer-photo" style="max-width:70px;border-radius:50%;">

            <span class="gey">{{ $article->user->name }}</span>

            <br>

            <a href="{{ route('articles.show', $article->id) }}">
                <span>{{ $article->title }}</span>
            </a>

        </div>

        <hr>
    @endforeach --}}

<br>
<h1
    style=" font-family: 'Inter', sans-serif;font-size:40px;letter-spacing:-0.5px;margin:0;color:#111; margin-top: 3rem;">
    Most Popular in <span style="color:#007bff;">Opinion </span></h1>
<div style="width:60px; height:6px; background:brown; margin-top:0px; margin-left: 10px !important;"></div>
<br>

<section class="columns-section py-1">
    <div class="container">
        <div class="row">
            @foreach ($otherArticles as $article)
                <div class="col-md-4 column-item">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="badge mb-2" style="padding:1px 4px">{{ $article->category ? $article->category->name : ' ' }}</p>
                            <div class="author-name" style="text-transform: uppercase">
                                {{ $article->user->name }}
                            </div>
                            <a href="{{ route('articles.show', $article->id) }}" class="column-title">
                                {{ $article->title }}
                            </a>
                            <div class="column-date">
                                {{ $article->created_at->format('F j, Y') }}
                            </div>

                        </div>
                        <img src="{{ $article->user && $article->user->avatar
                            ? asset('storage/' . $article->user->avatar)
                            : asset('images/default-avatar.png') }}"
                            class="column-avatar">
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
<style>
    /* .col-md-4 {
        border-right: 1px solid #333;
    }

    .col-md-4:nth-child(3n) {
        border-right: none;
    } */
    .columns-section {
        background: #0c0c0c;
        color: white;
    }

    .column-item {
        padding: 10px;
        border-right: 1px dotted #656363;
    }

    .column-item:last-child {
        border-right: none;
    }

    .author-name {
        color: #9ca3af;
        font-size: 14px;
        margin-bottom: 6px;
    }

    .column-title {
        display: block;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
        color: white;
        text-decoration: none;
        margin-bottom: 10px;
    }

    .column-title:hover {
        color: #99baee;
    }

    .column-date {
        color: #9ca3af;
        font-size: 13px;
    }

    .column-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }
</style>