@extends('layouts.dashboard')

@section('content')
@php
/**
 * Vendor → Media → Add media: the direct door onto the shelf. The library page
 * browses what is already there; until this page, new files could only enter
 * through a field's picker — mid-attachment, never on their own. Uploads go
 * through the same POST /vendor/media endpoint the picker uses (sequential,
 * per-file feedback), and every finished file lands as a tile below.
 */
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
@php // The sibling page in the subheader slot, mirroring the library's own Add media door.
@endphp
@php ob_start();
@endphp
<a class="qm-btn qm-btn-outline" href="{{ route('vendor.media') }}"><i class="fas fa-photo-video me-1" aria-hidden="true"></i> {{ t_raw('nav.media_library') }}</a>
@php \App\Support\View::slot('subhead', ob_get_clean());
@endphp

<div class="qm-card qm-card-pad">
    <div class="qm-media-adddrop" data-media-add data-endpoint="{{ route('vendor.media') }}">
        <i class="fas fa-cloud-upload-alt" aria-hidden="true"></i>
        <p class="mb-0">{{ t_raw('media.drop_here') }}</p>
        <button type="button" class="qm-btn qm-btn-outline qm-btn-sm" data-media-add-browse>{{ t_raw('media.browse') }}</button>
        <input type="file" accept="image/*,video/mp4,video/webm,video/ogg" multiple hidden data-media-add-input>
        <p class="qm-media-state mb-0" data-media-add-progress hidden>{{ t_raw('media.uploading') }}</p>
    </div>
    @php /* What arrived this visit, newest first — the same tiles the library shows. */
@endphp
    <div class="qm-media-grid qm-media-admingrid mt-3" data-media-add-done hidden></div>
</div>

</div>@php /* /.qm-d2 */
@endphp
@endsection