<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Forum: Threads"; include('partials/app-meta-title.php'); ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Forum: Threads"; $pageSubTitle1 = "Layouts"; $pageSubTitle2 = "Miscellaneous"; $pageSubText = "Thread view with posts, replies, pagination, etc, with a functional \"New Thread\" button."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">
                        <div class="row">
                            <div class="col-xl-12">

                                <div class="input-group input-group-lg mb-g">
                                    <input type="text" class="form-control shadow-inset-2" placeholder="Search Threads">
                                    <button class="btn btn-outline-default" type="button">
                                        <i class="fal fa-search"></i>
                                    </button>
                                </div>

                                <div class="card mb-g border shadow-0">
                                    <div class="card-header">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div class="flex-grow-1">
                                                <span class="h6 fw-bold text-uppercase d-flex align-items-center mb-0">
                                                    <a href="forum.php" class="btn btn-icon btn-outline-default me-2">
                                                        <i class="fal fa-chevron-left"></i>
                                                    </a>
                                                    Account information &amp; Security
                                                </span>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:void(0);" class="btn btn-success shadow-0 btn-sm ms-auto flex-shrink-0 waves-effect waves-themed" data-bs-toggle="modal" data-bs-target="#newThreadModal">New Thread</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-header p-0">
                                        <div class="row g-0 row-grid align-items-stretch">
                                            <div class="col-12 col-md">
                                                <div class="text-uppercase text-muted py-2 px-3">Title</div>
                                            </div>
                                            <div class="col-sm-6 col-md-2 col-xl-1 d-none d-md-block">
                                                <div class="text-uppercase text-muted py-2 px-3">Replies</div>
                                            </div>
                                            <div class="col-sm-6 col-md-3 d-none d-md-block">
                                                <div class="text-uppercase text-muted py-2 px-3">Last update</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="row g-0 row-grid">
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <a href="forum-discussion.php" class="fs-lg fw-500 d-flex align-items-start">
                                                                    Package location <span class="badge bg-warning ms-auto">Sticky</span>
                                                                </a>
                                                                <div class="d-block text-muted fs-sm">
                                                                    Started by <a href="javascript:void(0);">c_lantern</a> on January 21, 2019 @12:30PM
                                                                </div>
                                                            </div>
                                                            <div class="d-flex">
                                                                <ul class="pagination pagination-xs mb-0 mt-3 align-self-end">
                                                                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                                    <li class="paginate_button page-item disabled px-0">…</li>
                                                                    <li class="page-item"><a class="page-link" href="#">7</a></li>
                                                                    <li class="page-item"><a class="page-link" href="#">25</a></li>
                                                                    <li class="page-item">
                                                                        <a class="page-link" href="#" aria-label="Next">
                                                                            <span aria-hidden="true">Last page</span>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">72 <i>Replies</i></span>
                                                            <span class="d-block text-muted">4314 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Nam at justo magna. Aenean facilisis ultricies turpis
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 12:13 <a href="javascript:void(0)">c_lantern</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <a href="forum-discussion.php" class="fs-lg fw-500 d-flex align-items-start">
                                                                    Vestibulum molestie, ipsum vitae feugiat lacinia
                                                                </a>
                                                                <div class="d-block text-muted fs-sm">
                                                                    Started by <a href="javascript:void(0);">jamie</a> on January 12, 2019 @4:23PM
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">15 <i>Replies</i></span>
                                                            <span class="d-block text-muted">4314 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Morbi id enim a ex gravida dignissim nec eu massa
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 06:01 <a href="javascript:void(0)">jamie</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <a href="forum-discussion.php" class="fs-lg fw-500 d-flex align-items-start">
                                                                    Nam viverra diam magna, eget lobortis orci tincidunt sed <span class="badge bg-danger ms-auto"><i class="fal fa-lock"></i> <span class="ms-1 d-none d-md-inline">Locked</span></span>
                                                                </a>
                                                                <div class="d-block text-muted fs-sm">
                                                                    Started by <a href="javascript:void(0);">maggie</a> on February 17, 2019 @8:01AM
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">764 <i>Replies</i></span>
                                                            <span class="d-block text-muted">534 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Duis placerat in sapien et placerat. Duis quis feugiat leo. Curabitur laoreet ex nec odio interdum
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 12:25 <a href="javascript:void(0)">josekras_alma</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12 disabled">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <span class="fs-lg fw-500 d-flex align-items-start"> Proin vehicula nibh a nisl porta laoreet <span class="badge bg-secondary ms-auto">Disabled</span>
                                                                </span>
                                                                <div class="d-block text-muted fs-sm"> Started by <a href="javascript:void(0);">larry85</a> on December 12, 2019 @12:30PM </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">87 <i>Replies</i></span>
                                                            <span class="d-block text-muted">674 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <span class="d-block text-truncate"> Praesent mollis congue bibendum. Etiam ipsum augue, sodales id metus a, molestie hendrerit felis. </span>
                                                                    <div class="text-muted small text-truncate"> Today, 05:25 <span>lambert</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <a href="forum-discussion.php" class="fs-lg fw-500 d-flex align-items-start">
                                                                    Nulla auctor hendrerit purus, sit amet lacinia tellus placerat nec.
                                                                </a>
                                                                <div class="d-block text-muted fs-sm">
                                                                    Started by <a href="javascript:void(0);">gi_34</a> on January 01, 2019 @2:30PM
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">731<i>Replies</i></span>
                                                            <span class="d-block text-muted">1246 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Proin non felis lobortis, porta arcu a, iaculis arcu. Morbi tincidunt non ante et fermentum
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 05:25 <a href="javascript:void(0)">elmo</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <a href="forum-discussion.php" class="fs-lg fw-500 d-flex align-items-start">
                                                                    Donec tincidunt augue auctor, ullamcorper urna ac
                                                                </a>
                                                                <div class="d-block text-muted fs-sm">
                                                                    Started by <a href="javascript:void(0);">zico03</a> on August 25, 2019 @7:45PM
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">3943<i>Replies</i></span>
                                                            <span class="d-block text-muted">9843 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Sed felis eros, facilisis eu cursus at, efficitur et felis
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 05:25 <a href="javascript:void(0)">katty60</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <a href="forum-discussion.php" class="fs-lg fw-500 d-flex align-items-start">
                                                                    Nullam in dictum lacus. Nulla auctor hendrerit purus, sit amet lacinia tellus placerat nec
                                                                </a>
                                                                <div class="d-block text-muted fs-sm">
                                                                    Started by <a href="javascript:void(0);">c_lantern</a> on January 21, 2019 @12:30PM
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">38<i>Replies</i></span>
                                                            <span class="d-block text-muted">55 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        Phasellus quis sem diam. Sed commodo metus in ultrices consequat
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 05:25 <a href="javascript:void(0)">laigma76</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                            <!-- thread -->
                                            <div class="col-12">
                                                <div class="row g-0 row-grid align-items-stretch">
                                                    <div class="col-md">
                                                        <div class="p-3">
                                                            <div class="d-flex flex-column">
                                                                <a href="forum-discussion.php" class="fs-lg fw-500 d-flex align-items-start">
                                                                    Sit amet lacinia tellus placerat nec. Nunc condimentum
                                                                </a>
                                                                <div class="d-block text-muted fs-sm">
                                                                    Started by <a href="javascript:void(0);">lambert89</a> on March 12, 2019 @7:30AM
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4 col-md-2 col-xl-1 d-none d-md-block">
                                                        <div class="p-3 p-md-3 fs-sm">
                                                            <span class="d-block text-muted">24<i>Replies</i></span>
                                                            <span class="d-block text-muted">100 <i>Views</i></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-8 col-md-3 d-none d-md-block">
                                                        <div class="p-3 p-md-3">
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-1 min-width-0 fs-sm">
                                                                    <a href="javascript:void(0)" class="d-block text-truncate">
                                                                        ullamcorper cursus. Proin sodales odio sed aliquet pulvinar. Duis ipsum erat, ultricies a dolor non, tempor dictum ante
                                                                    </a>
                                                                    <div class="text-muted small text-truncate">
                                                                        Today, 05:25 <a href="javascript:void(0)">laigma76</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- thread -end -->
                                        </div>
                                    </div>
                                </div>

                                <ul class="pagination pagination-sm mt-3">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" aria-label="First">
                                            First
                                        </a>
                                    </li>
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" aria-label="Previous">
                                            Prev
                                        </a>
                                    </li>
                                    <li class="page-item active" aria-current="page">
                                        <span class="page-link">
                                            1
                                            <span class="sr-only">(current)</span>
                                        </span>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="paginate_button page-item disabled px-0">…</li>
                                    <li class="page-item"><a class="page-link" href="#">7</a></li>
                                    <li class="page-item"><a class="page-link" href="#">8</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Next">
                                            Next
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="#" aria-label="Last">
                                            Last
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- New Thread Modal -->
                    <div class="modal fade" id="newThreadModal" tabindex="-1" aria-labelledby="newThreadModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="newThreadModalLabel">Create New Thread</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="mb-3">
                                            <label for="threadTitle" class="form-label">Thread Title</label>
                                            <input type="text" class="form-control" id="threadTitle" placeholder="Enter a descriptive title for your thread">
                                        </div>

                                        <div class="mb-3">
                                            <label for="threadCategory" class="form-label">Category</label>
                                            <select class="form-select" id="threadCategory">
                                                <option selected>Account information &amp; Security</option>
                                                <option>General Discussion</option>
                                                <option>Troubleshooting</option>
                                                <option>Feature Requests</option>
                                                <option>Product Announcements</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="threadTags" class="form-label">Tags</label>
                                            <input type="text" class="form-control" id="threadTags" placeholder="Add tags separated by commas">
                                            <div class="form-text">Optional tags to help categorize your thread</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="threadContent" class="form-label">Thread Content</label>
                                            <!-- <div class="btn-toolbar mb-2" role="toolbar">
                                <div class="btn-group me-2" role="group">
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-bold"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-italic"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-underline"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-strikethrough"></i></button>
                                </div>
                                <div class="btn-group me-2" role="group">
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-list-ul"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-list-ol"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-indent"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-outdent"></i></button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-link"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-image"></i></button>
                                    <button type="button" class="btn btn-outline-secondary"><i class="fal fa-code"></i></button>
                                </div>
                            </div> -->
                                            <textarea class="form-control" id="threadContent" rows="8" placeholder="Describe your topic in detail"></textarea>
                                        </div>

                                        <div class="mb-3">
                                            <label for="threadAttachments" class="form-label">Attachments</label>
                                            <input class="form-control" type="file" id="threadAttachments" multiple>
                                            <div class="form-text">Max file size: 2MB. Allowed formats: jpg, png, gif, pdf, doc, zip</div>
                                        </div>

                                        <div class="mb-3 form-check">
                                            <input type="checkbox" class="form-check-input" id="notifyReplies">
                                            <label class="form-check-label" for="notifyReplies">Notify me when someone replies</label>
                                        </div>

                                        <div class="mb-3 form-check">
                                            <input type="checkbox" class="form-check-input" id="stickyThread">
                                            <label class="form-check-label" for="stickyThread">Make this thread sticky</label>
                                            <div class="form-text">Admin approval required</div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button type="button" class="btn btn-success">Create Thread</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

</body>

</html>