<?php include 'header.php'; ?>
<?php include '_top-header.php'; ?>

<div class="page">

    <div class="container p-0">

        <div class="profile-layout">

            <div class="start">
                <?php include '_profile-layout-side-menu.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="card">

                    <div class="flex-between h-40px mb-3">

                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Create post</li>
                        </ol>

                    </div>

                    <div class="steps-wizard-wrapper">

                        <div class="start">

                            <div class="steps-wrapper">

                                <a href="#" class="step current">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> Post Details </span>
                                    <span class="show-sm"> Details</span>
                                </a>

                                <a href="#" class="step ">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> target audience </span>
                                    <span class="show-sm"> information</span>
                                </a>

                                <a href="#" class="step">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> Package </span>
                                    <span class="show-sm"> Package</span>
                                </a>

                                <a href="#" class="step">
                                    <i class="icon-check"></i>
                                    <span class="show-lg"> Post Review </span>
                                    <span class="show-sm"> Review</span>
                                </a>
                            </div>

                        </div> <!-- start -->

                        <div class="center">

                            <p class="lead font-medium mb-0"> Assets </p>

                            <div class="form-group mb-4 upload-with-thumbnails-container mb-4">

                                <div class="mb-4">
                                    <button class="btn btn-outline-primary upload-btn upload-button-section">
                                        <a href="#" class="btn btn-action btn-action-sm btn-primary-faded mb-1">
                                            <i class="icon icon-image"></i>
                                        </a>
                                        Upload Assets
                                    </button>
                                    <input id="upload" class="upload-with-thumbnails d-none" type="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" />
                                </div><!-- upload-button-section -->

                                <div class="thumbnails-list-wrapper mb-3">

                                    <div class="one-thumbnail-wrapper">

                                        <div class="one-thumbnail default" data-default-view-translation="العرض الافتراضي">

                                            <img src="assets/img/thumbs/500x500-001.jpg" />

                                            <div class="loading-container">
                                                <div class="loader sm"></div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="one-thumbnail-wrapper text-center">

                                        <div class="one-thumbnail is-loading" data-default-view-translation="العرض الافتراضي">

                                            <img src="assets/img/thumbs/500x500-001.jpg" />


                                            <div class="loading-container">
                                                <div class="loader sm"></div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="one-thumbnail-wrapper text-center">

                                        <div class="one-thumbnail" data-default-view-translation="العرض الافتراضي">

                                            <img src="assets/img/thumbs/500x500-001.jpg" />

                                            <div class="video-icon">
                                                <img class="play-icon" src="assets/img/play-white.png" />
                                            </div>

                                            <div class="loading-container">
                                                <div class="loader sm"></div>
                                            </div>

                                        </div>

                                        <a href="#" class="btn btn-action btn-action-sm btn-danger-faded"> <i class="icon icon-trash"></i> </a>

                                    </div>

                                    <div class="one-thumbnail-wrapper text-center">

                                        <div class="one-thumbnail" data-default-view-translation="العرض الافتراضي">

                                            <img src="assets/img/thumbs/500x500-001.jpg" />



                                            <div class="loading-container">
                                                <div class="loader sm"></div>
                                            </div>
                                        </div>

                                        <a href="#" class="btn btn-action btn-action-sm btn-danger-faded"> <i class="icon icon-trash"></i> </a>

                                    </div>

                                    <div class="one-thumbnail-wrapper text-center">

                                        <div class="one-thumbnail" data-default-view-translation="العرض الافتراضي">

                                            <img src="assets/img/thumbs/500x500-001.jpg" />



                                            <div class="loading-container">
                                                <div class="loader sm"></div>
                                            </div>
                                        </div>

                                        <a href="#" class="btn btn-action btn-action-sm btn-danger-faded"> <i class="icon icon-trash"></i> </a>

                                    </div>

                                </div>

                                <input id="primary-asset-id" type="text" placeholder="primary asset id" class="d-none">

                                <span class="badge badge-sm badge-secondary-faded">
                                    <i class="icon icon-info me-2"></i>
                                    Maximum 5 photos and 4 videos
                                </span>

                                <span class="badge badge-sm badge-danger-faded">
                                    <i class="icon icon-info me-2"></i>
                                    You have hit the maximum number of images
                                </span>

                            </div><!-- form-group -->

                            <p class="lead font-medium mb-2"> Post Details </p>

                            <div class="form-group">
                                <label> Post Title </label>
                                <input type="text" class="form-control" placeholder="Post Title">
                            </div>

                            <div class="form-group">
                                <label> Description </label>
                                <textarea class="form-control" id="" rows="3" placeholder="Description"></textarea>
                            </div>

                            <div class="form-group">
                                <label> Keywords </label>
                                <!-- <select class="select2 w-100" multiple="multiple" data-placeholder="Keywords">
                                    <option value="AL">Brazil</option>
                                    <option value="WY">Canada</option>
                                    <option value="CA">France</option>
                                    <option value="TX">Germany</option>
                                    <option value="FL">Italy</option>
                                    <option value="NY">Japan</option>
                                    <option value="IL">Kenya</option>
                                    <option value="GA">Mexico</option>
                                    <option value="OH">Nigeria</option>
                                    <option value="MI">Spain</option>
                                </select> -->



                            </div>

                            <div class="form-group radio-with-side-content">

                                <label> Including link </label>

                                <div class="custom-control custom-radio side-content control-border mb-2">

                                    <input type="radio" id="customRadioBorder1" name="customRadioBorder" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadioBorder1">
                                        <div class="flex-start">
                                            <i class="icon icon-wallet-checked icon-lg me-2 color-gray"></i>
                                            Product Page
                                        </div>
                                    </label>

                                    <div class="side-content-wrapper">
                                        <select class="select2 w-100" multiple="multiple" data-placeholder="Select Product">
                                            <option value="AL">Brazil</option>
                                            <option value="WY">Canada</option>
                                            <option value="CA">France</option>
                                            <option value="TX">Germany</option>
                                            <option value="FL">Italy</option>
                                            <option value="NY">Japan</option>
                                            <option value="IL">Kenya</option>
                                            <option value="GA">Mexico</option>
                                            <option value="OH">Nigeria</option>
                                            <option value="MI">Spain</option>
                                        </select>
                                    </div>

                                </div> <!-- custom-radio -->

                                <div class="custom-control custom-radio side-content control-border mb-2">

                                    <input type="radio" id="customRadioBorder2" name="customRadioBorder" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadioBorder2">
                                        <div class="flex-start">
                                            <i class="icon icon-wallet-checked icon-lg me-2 color-gray"></i>
                                            Store Page
                                        </div>
                                    </label>

                                    <div class="side-content-wrapper">
                                        <select class="select2 w-100" multiple="multiple" data-placeholder="Select Store">
                                            <option value="AL">Brazil</option>
                                            <option value="WY">Canada</option>
                                            <option value="CA">France</option>
                                            <option value="TX">Germany</option>
                                            <option value="FL">Italy</option>
                                            <option value="NY">Japan</option>
                                            <option value="IL">Kenya</option>
                                            <option value="GA">Mexico</option>
                                            <option value="OH">Nigeria</option>
                                            <option value="MI">Spain</option>
                                        </select>
                                    </div>

                                </div> <!-- custom-radio -->

                                <div class="custom-control custom-radio side-content control-border mb-2">

                                    <input type="radio" id="customRadioBorder3" name="customRadioBorder" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadioBorder3">
                                        <div class="flex-start">
                                            <i class="icon icon-wallet-checked icon-lg me-2 color-gray"></i>
                                            External link
                                        </div>
                                    </label>
                                    <div class="side-content-wrapper">

                                        <div class="form-group m-0">
                                            <input type="text" class="form-control" placeholder="Link">
                                        </div>

                                    </div>


                                </div> <!-- custom-radio -->

                                <div class="custom-control custom-radio side-content control-border mb-2">

                                    <input type="radio" id="customRadioBorder4" name="customRadioBorder" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadioBorder4">
                                        <div class="flex-start">
                                            <i class="icon icon-wallet-checked icon-lg me-2 color-gray"></i>
                                            No link
                                        </div>
                                    </label>

                                </div> <!-- custom-radio -->

                            </div> <!-- form-group -->






                        </div><!-- center -->

                        <div class="end">

                            <div class="row">

                                <div class="col-6">
                                </div>

                                <div class="col-6">
                                    <div class="flex-end w-100 gap-3">
                                        <a href="#" class="btn btn-primary-faded"> Save & Exit </a>
                                        <a href="profile-create-post-2.php" class="btn btn-primary"> Next </a>

                                    </div>
                                </div>

                            </div>

                        </div><!-- end -->

                    </div><!-- steps-wizard-wrapper -->

                </div> <!-- card -->

            </div> <!-- end -->

        </div> <!-- profile-layout -->

    </div> <!-- container -->

</div> <!-- page -->

<?php include 'footer.php'; ?>