@extends('layouts.default')

@section('content')
<div class="container">
    <div class="flex-wrap">
        <div>
            <a href="{{ route('sample.layout') }}" class="button">레이아웃샘플</a>
            <a href="{{ route('sample.board.list') }}" class="button">게시판리스트샘플</a>
            <a href="{{ route('sample.board.show') }}" class="button">게시판상세샘플</a>
        </div>
    </div>

    <!-- 페이지타이틀 -->
    <div class="area-pages-top">
        <h1 class="page-title">게시판샘플 -  view / write </h1>
    </div>

    <!-- 컨텐츠 영역 -->
    <div class="area-pages-content">
        <!-- 게시판 : view -->
        <div class="area-board-basic">
            <div class="area-board-view">
                <!-- 게시판 헤더 -->
                <div class="view-header">
                    <div class="subject">질문타이틀</div>
                    <div class="user-info">
                        <span class="user-name">글쓴이</span>
                        <span class="user-date">날짜</span>
                        <span class="count">조회수</span>
                    </div>
                </div>
                <div class="view-content">
                    G어학원은 바닐라드에 위치하고 있습니다. 바닐라드는 신도시 같은 느낌이 있어요! 세부 시내와도 가까워서 접근성이 아주
                    좋아요. 세부에 유명한 아얄라몰, 아이티파크와 택시로 10분정도 걸리는 거리에요. 주말마다 맛집 레스토랑을 찾아 다녔는데
                    거진 세부 시티에 레스토랑이 위치해 있기 때문에 택시타고 2천원도 안되는 가격으로 다녔어요!
                </div>

                <!-- 코멘트작성 -->
                <div class="view-content-comment">
                    <textarea></textarea>
                </div>
            </div>
            <div class="button-wrap center">
                <a href="#" class="button">수정</a>
                <a href="#" class="button">삭제</a>
                <a href="#" class="button color">목록</a>
            </div>
        </div>

        <!-- 게시판 : write -->
        <div class="area-board-basic">
            <form>
                <div class="area-board-write">
                    <!-- 게시판 헤더 -->
                    <div class="write-header">
                        <table>
                            <tr>
                                <th><label for="board-write-subject">글제목</label></th>
                                <td><input type="text" id="board-write-subject" name="" class="wide"></td>
                            </tr>
                            <tr>
                                <th>옵션</th>
                                <td>
                                    <p class="chk-wrap">
                                        <span class="tit">카테고리</span>
                                        <span class="rdo"><input type="radio" id="option-cate1" name=""><label for="option-cate1">미국</label></span>
                                        <span class="rdo"><input type="radio" id="option-cate2" name=""><label for="option-cate2">영국</label></span>
                                        <span class="rdo"><input type="radio" id="option-cate3" name=""><label for="option-cate3">캐나다</label></span>
                                        <span class="rdo"><input type="radio" id="option-cate4" name=""><label for="option-cate4">스위스</label></span>
                                        <span class="rdo"><input type="radio" id="option-cate5" name=""><label for="option-cate5">프랑스</label></span>
                                        <span class="rdo"><input type="radio" id="option-cate6" name=""><label for="option-cate6">필리핀</label></span>
                                        <span class="rdo"><input type="radio" id="option-cate7" name=""><label for="option-cate7">뉴질랜드</label></span>
                                        <span class="rdo"><input type="radio" id="option-cate8" name=""><label for="option-cate8">호주</label></span>
                                    </p>
                                    <p class="chk-wrap">
                                        <span class="tit">유형분류</span>
                                        <span class="rdo"><input type="radio" id="option-spec1" name=""><label for="option-spec1">1:1미팅</label></span>
                                        <span class="rdo"><input type="radio" id="option-spec2" name=""><label for="option-spec2">설명회</label></span>
                                        <span class="rdo"><input type="radio" id="option-spec3" name=""><label for="option-spec3">입학심사</label></span>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <th>섬네일 추가</th>
                                <td>
                                    <div class="file-custom">
                                        <label for="board-write-thumb" class="button color">업로드</label>
                                        <input type="file" id="board-write-thumb" class="input-file-custom" hidden>
                                        <input type="text" class="upload-file-name" value="파일선택"><!-- [D]: 파일명 입력될 때 앞에 패스 삭제해주세요 -->
                                        <input type="reset" class="button file-reset" value="삭제">
                                    </div>
                                </td>
                                <script>
                                    $(".input-file-custom").on('change',function(){
                                        var fileName = $(this).val();
                                        $(".upload-file-name").val(fileName);
                                    });
                                </script>
                            </tr>
                        </table>
                    </div>
                    <div class="write-content">
                        에디터 영역
                    </div>
                </div>
                <div class="button-wrap center">
                    <a href="#" class="button color">등록하기</a>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection