@extends('layouts.main', [
    'parentSection' => 'admin',
    'elementName' => 'blog-work'
])

@section('content')
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">네이버 블로그 작업(예정) 생성 글 확인</h1>
        </div>

        <div class="col-md-12">
            <div class="col">
                <div class="table">
                    <table >
                        <colgroup>
                            <col style="width: 200px;">
                            <col />
                        </colgroup>
                        <tbody>
                        <tr>
                            <th>인덱스</th>
                            <td>{{$data['id']}}</td>
                        </tr>
                        <tr>
                            <th>show</th>
                            <td>{{$data['show']}}</td>
                        </tr>
                        <tr>
                            <th>status</th>
                            <td>{{$data['status']}}</td>
                        </tr>
                        <tr>
                            <th>keywords</th>
                            <td>{{$data['keywords']}}</td>
                        </tr>
                        <tr>
                            <th>subject</th>
                            <td>{!! $data['subject'] !!}</td>
                        </tr>
                        <tr>
                            <th>content</th>
                            <td>{!! nl2br($data['content']) !!}</td>
                        </tr>
                        <tr>
                            <th>tags</th>
                            <td>{{$data['tags']}}</td>
                        </tr>
                        @forelse($data->images as $img)
                        <tr>
                            <td colspan="2 p-md-0 m-0">
                                <table class="table table-bordered p-md-0 m-0">
                                    <colgroup>
                                        <col style="width: 250px;">
                                        <col />
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td><img src="{{$img['path']}}" alt="" class="img-thumbnail" style="width:250px;" ></td>
                                            <td class="p-md-2">
                                                <p class="pd-2"><b>imgID:</b> {{$img['id']}}</p>
                                                <p class="pd-2"><b>naver_blog_work_id:</b> {{$img['naver_blog_work_id']}}</p>
                                                <p class="pd-2"><b>file_index:</b> {{$img['file_index']}}</p>
                                                <p class="pd-2"><b>path:</b> {{$img['path']}}</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        @empty

                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="row justify-content-md-center mt-4 mb-5">
                <div class="col-md-auto">
                    <button type="button" class="btn btn-outline-secondary" onclick="history.back(-1);"><i class="bi bi-arrow-left"></i>Back</button>
                    <a href="{{route($route_name.'.edit', ['id'=>$data['id'], Request::getQueryString()])}}" class="btn btn-group-sm btn-outline-primary">수정<i class="bi bi-pen-fill"></i></a>
                    <a href="{{route($route_name.'.lists', [Request::getQueryString()])}}" class="btn btn-group-sm btn-outline-secondary"><i class="bi bi-card-checklist"></i>목록</a>
                </div>
            </div>

            <div class="col">

            </div>
        </div>
    </main>
@endsection

@push('css')
    <style>
        a {text-decoration: none;}
        span.thumb {overflow: hidden;float: left;position: relative;margin: 1px 6px 0 -4px;border: 1px solid #fff;border-radius: 50%;}
        span.thumb img{width: 22px;aspect-ratio: auto 22 / 22;height: 22px;}

        .btn-group-sm>.btn, .btn-sm { padding: 3px 3px; font-size: 0.7rem; font-weight: bold; }
        .table td { padding: 20px 0px;}
        .table td hr { background-color: #cbd5e0; padding: 1px 0px; margin: 10px 0px;}
    </style>
@endpush

@push('js')
    <script>

    </script>
@endpush