Task Management Interface - Copy this Html, Bootstrap Component to your project

@extends('layouts.admin.admin')-@section('title',-'タスクの詳細')-@section('content')-<div-class="container-fluid">-<!---Page-Heading--->-<div-class="d-flex-align-items-center-justify-content-between-mb-3">-<h1-class="h4-text-gray-800"><i-class="fas-fa-tasks"></i>-タスクの詳細-#{{-$task->id-}}</h1>-<div>-<a-href="{{-route('admin.tasks.edit',-$task->id)-}}"-class="btn-btn-warning-btn-sm">-<i-class="fas-fa-edit"></i>-編集-</a>-<a-href="{{-url()->previous()-}}"-class="btn-btn-secondary-btn-sm">-<i-class="fas-fa-arrow-left"></i>-戻る-</a>-</div>-</div>-<!---Task-Details-Section--->-<div-class="card-shadow-mb-4">-<div-class="card-body">-<h5-class="card-title"><i-class="fas-fa-info-circle"></i>-タスク情報</h5>-<table-class="table-table-sm-table-borderless">-<tr><th><i-class="fas-fa-id-badge"></i>-ID:</th><td>{{-$task->id-}}</td></tr>-<tr><th><i-class="fas-fa-user"></i>-ユーザー:</th><td>{{-$task->user->name-}}</td></tr>-<tr><th><i-class="fas-fa-map-marker-alt"></i>-職場:</th><td>{{-$task->workplace->name-}}</td></tr>-<tr><th><i-class="fas-fa-map"></i>-住所:</th><td>{{-$task->workplace->address-}}</td></tr>-<tr><th><i-class="fas-fa-calendar-alt"></i>-作業日:</th><td>{{-$task->work_date->format('Y-m-d')-}}</td></tr>-<tr><th><i-class="fas-fa-clock"></i>-シフト:</th><td>{{-$task->shift-}}</td></tr>-<tr><th><i-class="fas-fa-clock"></i>-開始時間:</th><td>{{-$task->start_time-}}</td></tr>-<tr><th><i-class="fas-fa-clock"></i>-終了時間:</th><td>{{-$task->end_time-}}</td></tr>-<tr><th><i-class="fas-fa-tasks"></i>-ステータス:</th><td>{{-$task->status-}}</td></tr>-<tr><th><i-class="fas-fa-align-left"></i>-説明:</th><td>{{-$task->description-??-'説明なし'-}}</td></tr>-<tr><th><i-class="fas-fa-sticky-note"></i>-メモ:</th><td>{{-$task->notes-??-'メモなし'-}}</td></tr>-</table>-</div>-</div>-<!---Images-Section--->-<div-class="card-shadow-mb-4">-<div-class="card-body">-<h5-class="card-title-mb-4"><i-class="fas-fa-images"></i>-タスクの画像</h5>-@if-(session('success'))-<div-class="alert-alert-success">{{-session('success')-}}</div>-@endif-<!---Form-for-multiple-delete-action--->-<form-action="{{-route('admin.tasks.images.bulkDestroy',-$task->id)-}}"-method="POST">-@csrf-@method('DELETE')-<div-class="row">-@forelse-($images-as-$image)-<div-class="col-6-col-md-3-col-lg-2-mb-3">-<div-class="card-shadow-sm-position-relative">-<!---Image-thumbnail-with-link-to-open-in-new-tab--->-<a-href="{{-asset('storage/'-.-$image->path)-}}"-target="_blank">-<img-src="{{-asset('storage/'-.-$image->path)-}}"-class="card-img-top-rounded"-alt="Task-Image"-style="height:-100px;-object-fit:-cover;">-</a>-<!---Checkbox-for-multi-selection--->-<div-class="position-absolute"-style="top:-5px;-right:-5px;">-<input-type="checkbox"-name="image_ids[]"-value="{{-$image->id-}}"-class="form-check-input">-</div>-</div>-</div>-@empty-<div-class="col-12">-<p-class="text-muted">画像は見つかりませんでした。</p>-</div>-@endforelse-</div>-<!---Delete-selected-button--->-@if-($images->isNotEmpty())-<div-class="text-right-mt-3">-<button-type="submit"-class="btn-btn-danger-btn-sm">-<i-class="fas-fa-trash-alt"></i>-選択した画像を削除-</button>-</div>-@endif-</form>-</div>-</div>-</div>-@endsection-Improve-this-interface