<!DOCTYPE html>

<html>

<head>
    <title>[% title %] - Categories </title>

    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
    <link rel="stylesheet" type="text/css" href="/css/lrr.css?[% version%]" />
    <link rel="stylesheet" type="text/css" href="/css/vendor/fontawesome-all.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/vendor/ReactToastify.min.css" />
	<link rel="stylesheet" type="text/css" href="/css/vendor/sweetalert2.min.css" />
    [% csshead %]

    <script src="/js/vendor/jquery.min.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/preact.umd.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/hooks.umd.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/compat.umd.js" type="text/JAVASCRIPT"></script>
	<script>window.React=window.preactCompat;window.react=window.preactCompat;</script>
	<script src="/js/vendor/clsx.min.js" type="text/JAVASCRIPT"></script>
	<script src="/js/vendor/react-toastify.umd.js" type="text/JAVASCRIPT"></script>
    <script src="/js/vendor/sweetalert2.min.js" type="text/JAVASCRIPT"></script>

    <script src="/js/common.js?[% version%]" type="text/JAVASCRIPT"></script>
    <script src="/js/server.js?[% version%]" type="text/JAVASCRIPT"></script>
    <script src="/js/category.js?[% version%]" type="text/JAVASCRIPT"></script>

</head>

<body>

    <div class='ido' style='text-align:center'>
        <h2 class='ih' style='text-align:center'>Categories</h2>
        <br><br>
        <div style='margin-left:auto; margin-right:auto;'>
            <div style='text-align:left; font-size: 9pt; width:400px !important ' class='left-column'>

                Categories appear at the top of your window when browsing the Library.<br>
                There are two distinct kinds:

                <ul>
                    <li><i class="fas fa-2x fa-folder-open" style="margin-left: -30px; width:30px"></i>
                        Static Categories are arbitrary collections of
                        Archives, where you can add as many items as you want.
                    </li>
                    <li><i class="fas fa-2x fa-bolt" style="margin-left: -25px; width:25px"></i>
                        Dynamic Categories contain all archives matching a given predicate, and
                        automatically update alongside your library.
                    </li>
                </ul>

                You can create new categories here or edit existing ones. </br></br>

                <div style="text-align:center">
                    <input id='new-static' type='button' value='New Static Category' class='stdbtn'>
                    <input id='new-dynamic' type='button' value='New Dynamic Category' class='stdbtn'>
                </div> <br>

                Select a category in the combobox below to edit its name, the archives it contains, or its predicate.
                <br> <b>All your modifications are saved automatically.</b> <br></br>

                <table>
                    <tbody>
                        <tr>
                            <td>
                                <h2>Category:</h2>
                            </td>
                            <td>
                                <select id="category" class="favtag-btn" style="font-size:20px; height:30px">
                                    <option disabled selected value> -- No Category -- </option>
                                </select>
                            </td>
                        </tr>
                        <tr class="tag-options">
                            <td style="text-align: right;">Name:</td>
                            <td>
                                <input id="catname" value="" />
                            </td>
                        </tr>
                        <tr id="predicatefield" class="tag-options">
                            <td style="text-align: right;">Predicate:</td>
                            <td>
                                <input id="catsearch" value="" />
                                <i id="predicate-help" style="cursor:pointer" class="fas fa-question-circle"></i>
                            </td>
                        </tr>
                        <tr class="tag-options">
                            <td></td>
                            <td>
                                <input id="pinned" name="pinned" class="fa" type="checkbox">
                                <label for="pinned">Pin this Category</label>
                            </td>
                        </tr>
                        <tr class="tag-options">
                            <td></td>
                            <td><input id="delete" type='button' value='Delete Category' class='stdbtn'>
                            </td>
                        </tr>
                        <tr class="tag-options">
                            <td></td>
                            <td id="status" style="font-size: 10pt;">
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>

            <div class="id1 right-column"
                style='text-align:center; min-width:400px; width: 60% !important; height:500px;'>

                <div id="dynamicplaceholder"
                    style="align-content: center;top: 150px; position: relative; margin-left: auto; margin-right: auto; width: 90%;">
                    <i class="fas fa-8x fa-air-freshener"></i><br><br>
                    <h2>If you select a Static Category, your archives will appear here so you can add/remove them from
                        the category.</h2>
                </div>

                <ul id="archivelist" class='checklist' style="display:none">
                    [% arclist %]
                </ul>
            </div>
            <br><br>
        </div>

        <input id='return' class='stdbtn' type='button' value='Return to Library' />

    </div>
    [% INCLUDE footer %]
</body>

</html>