<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="bobby">
    <title>게시판 페이지</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link href="/css/search-bar.css" rel="stylesheet">
    <link href="/css/articles/table-header.css" rel="stylesheet">
</head>

<body>

    <header id="header">
        헤더
        <hr>
    </header>

    <main class="container">
        <div class="row">
            <div class="card card-margin search-form">
                <div class="card-body p-0">
                    <form id="search-form">
                        <div class="row">
                            <div class="col-12">
                                <div class="row no-gutters">
                                    <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                                        <label for="search-type" hidden>검색 유형</label>
                                        <select class="form-control" id="search-type" name="searchType">
                                            <option>제목</option>
                                            <option>본문</option>
                                            <option>id</option>
                                            <option>닉네임</option>
                                            <option>해시태그</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-8 col-md-6 col-sm-12 p-0">
                                        <label for="search-value" hidden>검색어</label>
                                        <input type="text" placeholder="검색어..." class="form-control" id="search-value" name="searchValue">
                                    </div>
                                    <div class="col-lg-1 col-md-3 col-sm-12 p-0">
                                        <button type="submit" class="btn btn-base">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
                                                <circle cx="11" cy="11" r="8"></circle>
                                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="row">
            <table class="table" id="article-table">
                <thead>
                    <tr>
                        <th class="title col-6"><a>제목</a></th>
                        <th class="hashtag col-2"><a>해시태그</a></th>
                        <th class="user-id col"><a>작성자</a></th>
                        <th class="created-at col"><a>작성일</a></th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td class="title col-6"><a>첫 글</a></td>
                        <td class="hashtag col-2">#Java</td>
                        <td class="user-id">kim</td>
                        <td class="created-at"><time>2022-08-09</time></td>
                    </tr>
                    <tr>
                        <td>두번째 글</td>
                        <td>#Spring</td>
                        <td>kim</td>
                        <td>2022-08-09</td>
                    </tr>
                    <tr>
                        <td>세번째 글</td>
                        <td>#Mysql</td>
                        <td>kim</td>
                        <td>2022-08-09</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="row">
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a class="btn btn-primary me-md-2" role="button" id="write-article">글쓰기</a>
            </div>
        </div>

        <div class="row">
            <nav id="pagination" aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
        </div>
    </main>

    <footer id="footer">
        <hr>
        푸터
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>