@extends('ged.layout')
@section('title', $message->subject)
@section('page_title', $message->subject)

@section('content')
<div class="ged-page-header">
    <h1><i class="fas fa-envelope-open"></i> {{ $message->subject }}</h1>
    <div style="display:flex;gap:8px">
        <a href="{{ route('ged.messages.compose') }}?to={{ $message->sender_id }}" class="ged-btn ged-btn-outline">
            <i class="fas fa-reply"></i> Répondre
        </a>
        <a href="{{ route('ged.messages.inbox') }}" class="ged-btn ged-btn-outline">
            <i class="fas fa-arrow-left"></i> Retour
        </a>
    </div>
</div>

<div class="ged-card" style="max-width:800px">
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--gray-100)">
        <div class="ged-message-avatar" style="width:44px;height:44px;font-size:14px">
            {{ strtoupper(substr($message->sender?->name ?? 'U', 0, 2)) }}
        </div>
        <div>
            <div style="font-weight:700;color:var(--gray-900)">{{ $message->sender?->name }}</div>
            <div style="font-size:12px;color:var(--gray-400)">
                À : <strong>{{ $message->receiver?->name }}</strong> ·
                {{ $message->created_at->format('d/m/Y à H:i') }}
            </div>
        </div>
    </div>

    <div style="font-size:14px;color:var(--gray-700);line-height:1.8;white-space:pre-wrap">{{ $message->body }}</div>

    @if($message->document)
    <div style="margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100)">
        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gray-400);margin-bottom:10px">Document joint</div>
        <div style="display:flex;align-items:center;gap:10px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:12px">
            <i class="{{ $message->document->icon }}" style="font-size:20px"></i>
            <div style="flex:1">
                <div style="font-weight:600;font-size:13px">{{ $message->document->name }}</div>
                <div style="font-size:11px;color:var(--gray-400)">{{ strtoupper($message->document->extension) }} · {{ $message->document->formatted_size }}</div>
            </div>
            <a href="{{ route('ged.documents.download', $message->document->id) }}" class="ged-btn ged-btn-primary ged-btn-sm">
                <i class="fas fa-download"></i> Télécharger
            </a>
        </div>
    </div>
    @endif
</div>
@endsection