@extends('layouts.site_layout')

@section('content')

<section class="py-5">
    <div class="container mt-lg-5 mb-lg-5 mt-0 mb-0">
        <div class="breadcrumbs">
            <span>
                <a href="#" class="fs-24 text-decoration-none text-dark opacity-5">Home <span class="px-lg-4 px-0">></span> </a>
                <a href="#" class="fs-24 text-decoration-none text-dark">Create Article</a>
            </span>
        </div>
        <h1 class="fs-42 my-4">Create Article</h1>
        <div class="row">
            <div class="col-lg-8">
                <nav class="article-tabs mb-5">
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <button class="nav-link border-0 pe-5 active" id="nav-content-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-content" type="button" role="tab" aria-controls="nav-content"
                            aria-selected="true">Content</button>
                        <button class="nav-link border-0 pe-5" id="nav-publishing-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-publishing" type="button" role="tab" aria-controls="nav-publishing"
                            aria-selected="false">Publishing</button>
                        <button class="nav-link border-0 pe-5" id="nav-language-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-language" type="button" role="tab" aria-controls="nav-language"
                            aria-selected="false">Language</button>
                        <button class="nav-link border-0 pe-5" id="nav-metadata-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-metadata" type="button" role="tab" aria-controls="nav-metadata"
                            aria-selected="false">Metadata</button>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-content" role="tabpanel"
                        aria-labelledby="nav-content-tab">
                        <form action="" class="row g-3">
                            <div class="col-lg-12 mb-3">
                                <label for="title" class="form-label fw-bold fs-20">Title<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title">
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label for="alias" class="form-label fw-bold fs-20">Alias</label>
                                <input type="text" class="form-control" id="alias">
                            </div>
                            <div class="col-lg-12 mb-3">
                                <input type="file" class="form-control">
                            </div>
                            <div class="col-lg-12 mb-3">
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                            </div>
                            <div>
                                <button class="btn bg-orange text-white fs-18 me-3">Save</button>
                                <button class="btn btn-outline-orange text-orange fs-18">Cancel</button>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="nav-publishing" role="tabpanel" aria-labelledby="nav-publishing-tab">
                        <form action="" class="row g-3">
                            <div class="col-lg-6 mb-3">
                                <label for="category" class="form-label fw-bold fs-20">Category<span
                                        class="text-danger">*</span></label>
                                <select id="category" class="form-select">
                                    <option selected>Choose...</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="tags" class="form-label fw-bold fs-20">Tags<span
                                        class="text-danger">*</span></label>
                                <select id="tags" class="form-select">
                                    <option selected>Choose...</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="note" class="form-label fw-bold fs-20">Note</label>
                                <input type="text" class="form-control" id="note">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="version-note" class="form-label fw-bold fs-20">Version Note</label>
                                <input type="text" class="form-control" id="version-note">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="authors-alias" class="form-label fw-bold fs-20">Author’s Alias</label>
                                <input type="text" class="form-control" id="authors-alias">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="status" class="form-label fw-bold fs-20">Status<span
                                        class="text-danger">*</span></label>
                                <select id="status" class="form-select">
                                    <option selected>Choose...</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="status" class="form-label fw-bold fs-20">Featured<span
                                        class="text-danger">*</span></label>
                                <select id="status" class="form-select">
                                    <option selected>Choose...</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="start-publishing" class="form-label fw-bold fs-20">Start Publishing</label>
                                <input type="date" class="form-control" id="start-publishing">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="finish-publishing" class="form-label fw-bold fs-20">Finish
                                    Publishing</label>
                                <input type="date" class="form-control" id="finish-publishing">
                            </div>
                            <div class="col-lg-6 mb-3">
                                <label for="status" class="form-label fw-bold fs-20">Access</label>
                                <select id="status" class="form-select">
                                    <option selected>Choose...</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div>
                                <button class="btn bg-orange text-white fs-18 me-3">Save</button>
                                <button class="btn btn-outline-orange text-orange fs-18">Cancel</button>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="nav-language" role="tabpanel" aria-labelledby="nav-language-tab">
                        <div class="col-lg-6 mb-5">
                            <label for="language" class="form-label fw-bold fs-20">Language</label>
                            <select id="language" class="form-select">
                                <option selected>Select Language</option>
                                <option>...</option>
                            </select>
                        </div>
                        <div>
                            <button class="btn bg-orange text-white fs-18 me-3">Save</button>
                            <button class="btn btn-outline-orange text-orange fs-18">Cancel</button>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-metadata" role="tabpanel" aria-labelledby="nav-metadata-tab">
                        <div class="col-lg-6 mb-3">
                            <label for="meta-description" class="form-label fw-bold fs-20">Meta Description</label>
                            <textarea class="form-control" placeholder=""
                                id="meta-description" rows="3"></textarea>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label for="keywords" class="form-label fw-bold fs-20">Keywords</label>
                            <textarea class="form-control" placeholder="Input Keywords"
                                id="keywords" rows="3"></textarea>
                        </div>
                        <div>
                            <button class="btn bg-orange text-white fs-18 me-3">Save</button>
                            <button class="btn btn-outline-orange text-orange fs-18">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4"></div>
        </div>
    </div>
</section>


@endsection