[%# components/icon-browser.tt

Icon browser modal skeleton

Authors:
    Afuna <coder.dw@afunamatata.com>

Copyright (c) 2015 by Dreamwidth Studios, LLC.

This program is free software; you may redistribute it and/or modify it under
the same terms as Perl itself.  For a copy of the license, please reference
'perldoc perlartistic' or 'perldoc perlgpl'.
%]

[%- IF remote && remote.can_use_userpic_select -%]

[%- dw.need_res( { group => "foundation" },
        "js/components/jquery.icon-browser.js"
        "stc/css/components/icon-browser.css"
    ); -%]

    [%- WRAPPER components/modal.tt id="js-icon-browser" class="icon-browser hide-icon-browser" options="animation:'fade'" -%]
    <div class="icon-browser-flex-wrapper">

        <div class="row">
            <div class="columns top-controls">
                <button type="button" id="icon-browser-options-visibility" aria-label="Show or hide icon browser display options">
                    <img alt="" src="[% site.imgroot %]/collapse.svg" style="border: 0; width: 1em; padding: 0.2em; box-sizing: content-box; vertical-align: text-bottom;">
                    <span class="icon-browser-options-summary-large">Large</span>
                    <span class="icon-browser-options-summary-small">Small</span>
                    /
                    <span class="icon-browser-options-summary-meta">Text</span>
                    <span class="icon-browser-options-summary-no-meta">No text</span>
                    /
                    <span class="icon-browser-options-summary-date">By date</span>
                    <span class="icon-browser-options-summary-keyword">By keyword</span>
                </button>

                <fieldset class="icon-browser-options" id="js-icon-browser-order-option">
                    <legend>Order by</legend>

                    <input type="radio" name="js-icon-browser-order" value="date" id="js-icon-browser-order-date">
                    <label for="js-icon-browser-order-date">Date</label>

                    <input type="radio" name="js-icon-browser-order" value="keyword" id="js-icon-browser-order-keyword">
                    <label for="js-icon-browser-order-keyword">Keyword</label>
                </fieldset>

                <fieldset class="icon-browser-options" id="js-icon-browser-meta-option">
                    <legend>Icon keywords</legend>

                    <input type="radio" name="js-icon-browser-meta" value="text" id="js-icon-browser-meta-text">
                    <label for="js-icon-browser-meta-text">Show</label>

                    <input type="radio" name="js-icon-browser-meta" value="no-text" id="js-icon-browser-meta-no-text">
                    <label for="js-icon-browser-meta-no-text">Hide</label>
                </fieldset>

                <fieldset class="icon-browser-options" id="js-icon-browser-size-option">
                    <legend>Size</legend>

                    <input type="radio" name="js-icon-browser-size" value="small" id="js-icon-browser-size-small">
                    <label for="js-icon-browser-size-small">Small</label>

                    <input type="radio" name="js-icon-browser-size" value="large" id="js-icon-browser-size-large">
                    <label for="js-icon-browser-size-large">Large</label>
                </fieldset>

                <label class='invisible' for='js-icon-browser-search'>Search</label>
                <input type='search' id='js-icon-browser-search' placeholder='Search' />
            </div>
        </div>

        <div id="js-icon-browser-content" class="icon-browser-content">
            <span class="icon-browser-status">Loading...</span>
            <ul class="js-icon-browser-icon-grid"></ul>
        </div>

    </div>
    [%- END -%]
[%- END -%]