@extends('layout', ['service'=>$service])

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="{{ asset('css/board.css') . $css_version }}">

    <!-- Color Picker -->
    <script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js"></script>
    <!-- Editor -->
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
    <!-- Editor's Plugin -->
    <script src="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.js"></script>

    <link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css" />
    <link rel="stylesheet" href="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.css" />
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@endsection

@section('gnb', view('gnb', ['service'=>$service]))

@section('subgnb', view($service.'.gnb'))

@section('content')
<div class="container">
    @include('common.board.path')

    <div class="write-wrapper">
        <form name="compose-form" method="post" id="compose-form" enctype="multipart/form-data" action="{{ !empty($article->id) ? route($db.'.store', ['service'=>$service, 'id'=>$article->id]):route($db.'.store', ['service'=>$service]) }}">
            @csrf
            <div class="wrapper">
                @if(view()->exists('common.board.'.$db.'.compose-inc'))
                    @include('common.board.'.$db.'.compose-inc')
                @else
                    <div class="write-header">
                        <table>
                            <tbody>
                                <tr>
                                    <th>
                                        <label class="ncsr" for="write-subject">제목</label>
                                    </th>
                                    <td>
                                        <div class="input">
                                            <input class="w100" id="write-subject" name="title" type="text" placeholder="제목을 입력해주세요." value="{{ !empty($article->title) ? $article->title:'' }}">
                                        </div>
                                    </td>
                                </tr>
                                @if ($config->secretable)
                                <tr>
                                    <th>
                                        <label>비밀글</label>
                                    </th>
                                    <td>
                                        <input type="checkbox" name="is_secret" value="1" @checked(!empty($article->is_secret))>
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                @endif

                <div id="editor">{!! !empty($article->content) ? $article->content:'' !!}</div>

                @if ($config->attachable)
                <div class="file-attach-wrapper">
                    <label>파일첨부:</label>
                    @if (!empty($article->attachments))
                    <ul>
                        @foreach($article->attachments as $file)
                            <li id="file-{{ $file->id }}">
                                @if(in_array($file->extension, config('system.image_ext')))
                                    <img src="{{ $file->url }}">
                                @endif
                                <div>
                                    <a href="{{ $file->url }}" target="_blank">{{ $file->name }}</a>
                                    <a class="del-file" href="/{{ $db }}/file/{{ $file->id }}" data-uid="{{ $file->id }}">삭제</a>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    @endif

                    <div class="-inputs" id="upload-wrapper">
                        <button type="button" onclick="addFileUploadForm()">추가</button>
                        <input class="inputfile" type="file" name="files[]" id="attach0">
                        <label for="attach0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>업로드할 파일을 선택해 주세요&hellip;</span></label>
                    </div>
                </div>
                @endif

                <div class="write-footer">
                    <div class="write-btn-area">
                        <div class="write-btn-left">
                            <a class="button primary" href="{{ route($db.'.index', ['service'=>$service]) }}">목록</a>
                        </div>
                        <div class="write-btn-right">
                            <button class="button primary" type="submit">등록</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('footer', view('footer'))

@section('script')
    {!! resource('js/common/custom-file-input.js') !!}
    {!! resource('js/common/board-compose.js') !!}
@endsection