@extends('layouts.app')

@section('content')
<style>
    /* Custom styles for article content to handle Gutenberg blocks */
    .article-content img.alignleft,
    .article-content .wp-block-image.alignleft,
    .article-content figure.alignleft {
        float: left;
        margin-right: 1.5em;
        margin-bottom: 1em;
    }
    
    .article-content img.alignright,
    .article-content .wp-block-image.alignright,
    .article-content figure.alignright {
        float: right;
        margin-left: 1.5em;
        margin-bottom: 1em;
    }
    
    .article-content img.aligncenter,
    .article-content .wp-block-image.aligncenter,
    .article-content figure.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    .article-content .wp-block-image {
        margin-bottom: 1.5em;
    }
    
    .article-content .wp-block-gallery {
        margin-bottom: 1.5em;
    }
    
    .article-content .wp-block-gallery.has-nested-images {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }
    
    .article-content .wp-block-gallery figure.wp-block-image {
        margin: 0;
        flex: 1 1 auto;
        min-width: 100px;
    }
    
    .article-content .wp-block-gallery figure.wp-block-image img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    .article-content .wp-block-columns {
        display: flex;
        margin-bottom: 1.5em;
        gap: 1em;
    }
    
    .article-content .wp-block-column {
        flex: 1;
        min-width: 0; /* Allows flex items to shrink below their content size */
    }
    
    .article-content .wp-block-heading,
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5,
    .article-content h6 {
        margin-top: 1.5em;
        margin-bottom: 1em;
    }
    
    .article-content p {
        margin-bottom: 1em;
    }
    
    /* Clear floats after content */
    .article-content:after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .article-content .wp-block-columns {
            flex-direction: column;
        }
    }
</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h2>{{ $article->name }}</h2>
                    @if($article->publish_date)
                        <small class="text-muted">Published: {{ \Carbon\Carbon::parse($article->publish_date)->format('F j, Y') }}</small>
                    @endif
                </div>
                
                <div class="card-body">
                    @if($article->header_image)
                        <div class="mb-4 text-center">
                            <img src="{{ asset('uploads/photos/'.$article->header_image) }}" alt="{{ $article->name }}" class="img-fluid">
                        </div>
                    @endif
                    
                    @if($article->header_content)
                        <div class="article-header-content mb-4">
                            {!! $article->header_content !!}
                        </div>
                    @endif
                    
                    <div class="article-content">
                        {!! $article->content !!}
                    </div>
                    
                    @if($article->content_2)
                        <hr class="mt-5 mb-5">
                        <h3>Additional Content (Secondary Language)</h3>
                        <div class="article-content-2">
                            {!! $article->content_2 !!}
                        </div>
                    @endif
                </div>
                
                @if($article->meta_title || $article->meta_description)
                <div class="card-footer text-muted">
                    @if($article->meta_title)
                        <p><strong>Meta Title:</strong> {{ $article->meta_title }}</p>
                    @endif
                    @if($article->meta_description)
                        <p><strong>Meta Description:</strong> {{ $article->meta_description }}</p>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection