<link rel="stylesheet" type="text/css" href="{{asset "css/demo.css"}}" />

<settings-sidebar class="settings-sidebar">
    <div class="settings-inner">
        <div class="settings-item">
            <label for="theme-presets" class="settings-label">
                <small>Theme presets</small>
            </label>
            <select class="settings-select" name="theme-presets" id="theme-presets">
                <option value="old-newspaper-light">Old Newspaper Light</option>
                <option value="modern-newspaper-light" selected>Modern Newspaper Light</option>
                <option value="old-newspaper-tinted">Old Newspaper Tinted</option>
                <option value="elegant-newspaper-light">Elegant Newspaper Light</option>
                <option value="elegant-newspaper-dark">Elegant Newspaper Dark</option>
                <option value="old-newspaper-dark">Old Newspaper Dark</option>
                <option value="modern-newspaper-dark">Modern Newspaper Dark</option>                
            </select>
       </div>

        <div class="settings-item">
            <label for="background-color" class="settings-label">
                <small>Background color</small>
            </label>
            <div class="color-picker-wrapper">
                <div class="colorpicker-overlay"></div>
                <input type="color" id="background-color" name="background-color" value="#FFFFFF" colorpick-eyedropper-active="false">
            </div>
        </div>

        <div class="settings-item">
            <label for="text-color" class="settings-label">
                <small>Text color</small>
            </label>
            <div class="color-picker-wrapper">
                <div class="colorpicker-overlay colorpicker-overlay-text"></div>
                <input type="color" id="text-color" name="text-color" value="#000000" colorpick-eyedropper-active="false">
            </div>
        </div>

        <div class="settings-item">
            <label for="fonts" class="settings-label">
                <small>Fonts</small>
            </label>
            <input id="fonts" name="fonts" type="text" value="Open Sans, EB Garamond, Roboto Condensed" class="settings-input"/>
        </div>

        <div class="settings-item">
            <label for="announcement-bar-type" class="settings-label">
                <small>Announcement bar type</small>
            </label>
            <select class="settings-select" name="announcement-bar-type" id="announcement-bar-type">
                 <option value="Normal">Normal</option>
                 <option value="Moving Several News" selected>Moving Several News</option>
                 <option value="Moving One News">Moving One News</option>             
                 <option value="Static">Static</option>
            </select>
       </div>

       <div class="settings-item">
            <label for="card-heading-style" class="settings-label">
                <small>Card heading style</small>
            </label>
            <select class="settings-select" name="card-heading-style" id="card-heading-style">
                 <option value="uppercase">uppercase</option>
                 <option value="capitalize">capitalize</option>
                 <option value="lowercase">lowercase</option>
                 <option value="none">none</option>
            </select>
       </div>

       <div class="settings-item">
            <label for="image-style" class="settings-label">
                <small>Image style</small>
            </label>
            <select class="settings-select" name="image-style" id="image-style">
                <option value="unset">Normal</option>
                 <option value="grayscale(1)">Grayscale</option>
                 <option value="grayscale(1) sepia(0.35) contrast(0.85)">Tinted</option>
            </select>
       </div>

       <div class="settings-item">
            <label for="use-initials" class="settings-label">
                <small>Use initials</small>
            </label>
            <select class="settings-select" name="use-initials" id="use-initials">
                 <option value="true">True</option>
                 <option value="false" selected>False</option>
            </select>
       </div>

       <div class="settings-item">
            <label for="use-newsletter" class="settings-label">
                <small>Newsletter on homepage and post sidebar</small>
            </label>
            <select class="settings-select" name="use-newsletter" id="use-newsletter">
                 <option value="true">True</option>
                 <option value="false">False</option>
            </select>
       </div>

       <div class="settings-item">
            <label for="tag-page-layout" class="settings-label">
                <small>Tag page layout</small>
            </label>
            <div class="settings-links" name="tag-page-layout" id="tag-page-layout">
                 <small>
                    <a class="settings-link" href="{{@site.url}}/tag/politics">Column</a>
                 </small>
                 <small>
                    <a class="settings-link" href="{{@site.url}}/tag/politics?tag-layout=simple">Simple</a>
                 </small>
            </div>
       </div>

       <div class="settings-item">
            <label for="author-page-layout" class="settings-label">
                <small>Author page layout</small>
            </label>
            <div class="settings-links" name="author-page-layout" id="author-page-layout">
                <small>
                    <a class="settings-link" href="{{@site.url}}/author/john-doe">Column</a>
                 </small>
                 <small>
                    <a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-left">Author Image Left</a>
                 </small>
                 <small>
                    <a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-right">Author Image Right</a>
                 </small>
                 <small>
                    <a class="settings-link" href="{{@site.url}}/author/katarina-smith-demo">Simple</a>
                 </small>
            </div>
       </div>

       <div class="settings-item">
            <label for="account-page-layout" class="settings-label">
                <small>Account page layout</small>
            </label>
            <div class="settings-links" name="account-page-layout" id="account-page-layout">
                <small>
                    <a class="settings-link" href="{{@site.url}}/demo-account">All Data Layout</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/demo-account?no-subscribe-button=true">All Data Layout No Btn</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple">Simple Layout</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple&no-subscribe-button=true">Simple Layout No Btn</a>
                </small>
            </div>
       </div>

       <div class="settings-item">
            <label for="post-header-type" class="settings-label">
                <small>Post header type</small>
            </label>
            <div class="settings-links" name="post-header-type" id="post-header-type">               
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=false">Narrow</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=false">Wide</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=false">Featured Image Left</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=false">Featured Image Right</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=true">Narrow With Sidebar</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=true">Wide With Sidebar</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=true">Featured Image Left With Sidebar</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=true">Featured Image Right With Sidebar</a>
                </small>
                <small>
                    <a class="settings-link" href="{{@site.url}}/innovation-in-the-corporate-world-unveiling-the-latest-business-trends?post-layout=narrow&sidebar=false">Members Only Post</a>
                </small>
            </div>
       </div>

       <div class="settings-item">
            <label for="sidebar-content" class="settings-label">
                <small>Sidebar content</small>
            </label>
            <select class="settings-select" name="sidebar-content" id="sidebar-content">
                 <option value="Featured Articles">Featured Articles</option>
                 <option value="Table Of Contents">Table Of Contents</option>
            </select>
       </div>

       <div class="settings-item">
            <label for="sidebar-position" class="settings-label">
                <small>Sidebar position</small>
            </label>
            <select class="settings-select" name="sidebar-position" id="sidebar-position">
                 <option value="Right">Right</option>
                 <option value="Left">Left</option>
            </select>
       </div>
    
        <div class="buy-button-wrapper">
            <a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="button buy-button" target="_blank">Buy Newspaper</a>
        </div>
    </div>
</settings-sidebar>

<div class="demo-buttons-container">
    <a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="demo-button" aria-label="Buy Newspaper" target="_blank">
        <div class="demo-button-inner">
            {{> "icons/download-icon"}}
        </div>        
    </a>

    <button id="settings-button" class="demo-button" aria-label="Newspaper Settings">
        <div class="demo-button-inner">
            {{> "icons/settings-icon"}}
        </div>        
    </button>
</div>

<script src="{{asset "js/demo.js"}}"></script>