@if (isset($dashboardNews) && $dashboardNews)
    <div class="d-flex col-xl-12 align-items-stretch">
        <div class="card w-100 mb-4 border-primary">
            <h5 class="card-header with-elements bg-primary text-white">
                <div class="card-header-title">
                    <i class="ion ion-md-megaphone mr-2"></i>
                    {{ __('home.news_updates') }}
                </div>
                <div class="card-header-elements ml-auto">
                    <span class="badge badge-light">{{ $dashboardNews->getDisplayDateFormatted() }}</span>
                </div>
            </h5>
            <div class="card-body">
                {{-- Kurzer Teaser Text --}}
                <div class="news-preview">
                    <h6 class="font-weight-bold mb-2">
                        <i class="ion ion-md-information-circle text-primary mr-1"></i>
                        {{ $dashboardNews->getLang('title') }}
                    </h6>
                    <p class="mb-2">
                        {{ $dashboardNews->getLang('teaser') }}
                    </p>
                </div>

                {{-- Collapse für mehr Inhalt --}}
                @if ($dashboardNews->getLang('content'))
                    <div class="collapse" id="newsCollapse">
                        <hr class="my-3">
                        <div class="news-full-content">
                            {!! $dashboardNews->getLang('content') !!}
                        </div>

                        {{-- Datei-Links --}}
                        @if ($dashboardNews->hasFileLinks())
                            <div class="mt-3">
                                <div class="d-flex flex-wrap gap-2">
                                    @foreach ($dashboardNews->getFileLinks() as $linkData)
                                        <a href="{{ route('storage_file', [$linkData['file']->id, 'dc_file', 'download']) }}"
                                            class="btn btn-sm btn-outline-success" target="_blank"
                                            title="{{ $linkData['file']->original_name }}">
                                            <i class="ion ion-md-download mr-1"></i>
                                            {{ $linkData['label'] }}
                                        </a>
                                    @endforeach

                                    <a href="{{ route('user_downloadcenter') }}" class="btn btn-sm btn-outline-success"
                                        title="{{ __('navigation.downloadcenter') }}">
                                        <i class="ion ion-ios-download mr-1"></i>
                                        {{ __('navigation.downloadcenter') }}
                                    </a>
                                </div>
                            </div>
                        @endif
                    </div>

                    {{-- Mehr lesen Button --}}
                    <div class="mt-3 d-flex align-items-center justify-content-between flex-wrap" style="gap: 0.5rem;">
                        <a class="btn btn-sm btn-outline-primary" data-toggle="collapse" href="#newsCollapse"
                            role="button" aria-expanded="false" aria-controls="newsCollapse">
                            <span class="when-closed">
                                <i class="ion ion-md-arrow-dropdown"></i> {{ __('home.read_more') }}
                            </span>
                            <span class="when-open">
                                <i class="ion ion-md-arrow-dropup"></i> {{ __('home.read_less') }}
                            </span>
                        </a>
                        <a href="{{ route('news_archive') }}" class="btn btn-sm btn-secondary">
                            <i class="ion ion-md-list mr-1"></i>
                            {{ __('home.news_archive_link') }}
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <style>
        .when-open {
            display: none;
        }

        .when-closed {
            display: inline;
        }

        [aria-expanded="true"] .when-open {
            display: inline;
        }

        [aria-expanded="true"] .when-closed {
            display: none;
        }

        .gap-2>* {
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .gap-2>*:last-child {
            margin-right: 0;
        }
    </style>
@endif