<main class="container bg-light shadow-sm rounded border my-2">
    <div class="row justify-content-center">
        <!-- Start Main Container -->
        <div class="col-12">
            <?php echo $breadhtml; ?>
            <h1 class="p-2 mb-3 text-dark text-truncate fs-5 fw-normal text-uppercase border-bottom"><i class="fa fa-upoad"></i> Upload Your Song</h1>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card card-body mb-2">
                        <h2 class="fs-6 text-danger">Why I Upload Song?</h2>
                        <ul>
                            <li>Free Song Hosted</li>
                            <li>Unlimited Uploads</li>
                            <li>Lifetime Free Access</li>

                        </ul>
                        <?php if ($isLogged) : ?>
                            <div id="alertbox" style="display: none;" class="alert alert-warning fade show" role="alert">
                            <p id="alertText"></p>    
                            </div>
                            <div class="progress" id="progressDiv" style="display: none;" style="height: 25px;">
                                <div class="progress-bar" id="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">1%</div>
                            </div>
                            <form action="" id="uploadForm">
                                <div class="form-group">
                                    <label for="file_name">Title: </label>
                                    <input type="text" name="file_name" class="form-control" id="file_name">
                                </div>
                                <div class="form-group">
                                    <label for="artist">Artist: </label>
                                    <select name="artist[]" id="artist" class="form-control" multiple="multiple">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="category_id">Category: </label>
                                    <select name="category_id" id="category_id" class="form-control" required>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="file">File: </label>
                                    <input type="file" name="file" class="form-control" id="file" accept="audio/mp3">
                                </div>
                                <div class="form-group">
                                    <label for="thumb">Thumbnail: </label>
                                    <input type="file" name="thumb" class="form-control" id="thumb" accept="image/*">
                                </div>
                                <div class="form-group mt-2">
                                    <button type="button" onclick="submitUpload();" id="UploadFile" class="btn btn-primary">Upload</button>
                                </div>
                            </form>
                        <?php else : ?>

                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                <strong>Sorry!</strong> First Login your Account
                            </div>
                            <button type="button" onclick="login();" class="btn btn-primary">Click Here</button>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>