@if ($invoice->file)

    <x-file-card
        :fileName="$invoice->file_name"
        :dateAdded="$invoice->updated_at->diffForHumans()">

        @if ($invoice->file_icon === 'images')
            <img src="{{ $invoice->file_url }}" />
        @else
            <i class="fa {{ $invoice->file_icon }} text-lightest"></i>
        @endif

        <x-slot name="action">
            <div class="dropdown ml-auto file-action">
                <button class="btn btn-lg f-14 p-0 text-lightest dropdown-toggle"
                        type="button" data-toggle="dropdown">
                    <i class="fa fa-ellipsis-h"></i>
                </button>

                <div class="dropdown-menu dropdown-menu-right border-grey rounded b-shadow-4 p-0">
                    <a class="d-block text-dark-grey f-13 pt-3 px-3"
                    target="_blank"
                    href="{{ $invoice->file_url }}">
                        @lang('app.view')
                    </a>

                    <a class="d-block text-dark-grey f-13 pb-3 px-3 delete-file"
                    data-row-id="{{ $invoice->id }}"
                    href="javascript:;">
                        @lang('app.delete')
                    </a>
                </div>
            </div>
        </x-slot>

    </x-file-card>

@else
    <div class="align-items-center d-flex flex-column text-lightest p-20 w-100">
        <i class="fa fa-file f-21 w-100"></i>
        <div class="f-15 mt-4">
            - @lang('messages.noFileUploaded') -
        </div>
    </div>
@endif