@extends('layouts.app')

@section('title', 'Danh sách Bài viết - Laravel Lab 07')

@push('styles')
<style>
    .article-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .article-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important;
    }
</style>
@endpush

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
    <div>
        <h2 class="fw-bold mb-1">
            <i class="bi bi-newspaper text-primary me-2"></i>Danh sách Bài viết
        </h2>
        <p class="text-muted mb-0">Quản lý bài viết qua chuẩn RESTful Resource Controller &amp; Named Routes</p>
    </div>
    <a href="{{ route('articles.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i>Thêm bài viết mới
    </a>
</div>

<div class="row g-3">
    @forelse($articles as $article)
        <div class="col-12">
            <div class="card border-0 shadow-sm article-card">
                <div class="card-body d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                    <div>
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                                {{ $article->category }}
                            </span>
                            <small class="text-muted">
                                <i class="bi bi-person me-1"></i>{{ $article->author }} &bull;
                                <i class="bi bi-eye me-1"></i>{{ number_format($article->views) }} lượt xem
                            </small>
                        </div>
                        <h5 class="card-title fw-bold mb-1">
                            <a href="{{ route('articles.show', $article) }}" class="text-decoration-none text-dark">
                                {{ $article->title }}
                            </a>
                        </h5>
                        <p class="card-text text-muted small mb-1">{{ $article->summary }}</p>
                        <code class="small text-secondary">/articles/slug/{{ $article->slug }}</code>
                    </div>

                    <div class="d-flex align-items-center gap-2 flex-shrink-0">
                        <a href="{{ route('articles.show', $article) }}" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-eye"></i> Xem
                        </a>
                        <a href="{{ route('articles.edit', $article) }}" class="btn btn-outline-warning btn-sm">
                            <i class="bi bi-pencil-square"></i> Sửa
                        </a>
                        <form action="{{ route('articles.destroy', $article) }}" method="POST"
                              onsubmit="return confirm('Bạn có chắc chắn muốn xóa bài viết «{{ addslashes($article->title) }}» không?');">
                            @csrf
                            @method('DELETE')
                            <x-button type="submit" variant="outline-danger" size="sm" icon="bi-trash">
                                Xóa
                            </x-button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <x-alert type="warning" message="Chưa có bài viết nào trong cơ sở dữ liệu." :dismissible="false" />
        </div>
    @endforelse
</div>
@endsection