{{!< default}}
<div class="wrapper">
    <aside class="settings-sidebar" role="complementary">
        <header>
            <h1 class="title">Settings</h1>
        </header>
        <nav class="settings-menu">
            <ul>
                <li class="general"><a href="#general">General</a></li>
                <li class="publishing"><a href="#content">Content</a></li>
            </ul>
        </nav>
    </aside>
    <section id="general" class="settings-content">
        <header>
            <h2 class="title">General</h2>
            <section class="page-actions">
                <button class="button-save">Save</button>
            </section>
        </header>
        <section class="content">
            {{#with settings}}
            <form id="settings-general">
                <fieldset>
                    <div class="form-group">
                        <label><strong>Blog Title</strong></label>
                        <input id="blog-title" name="general[title]" type="text" value="{{title}}" />
                        <p>How your blog name appears on the site</p>
                    </div>

                    <div class="form-group">
                        <label><strong>Blog Logo</strong></label>
                        <img src="/public/img/logo.png" alt="logo" height="38" width="381"/>
                        <p>Display a logo on your site in place of blog title</p>
                    </div>

                    <div class="form-group">
                        <label><strong>Blog Icon</strong></label>
                        <img src="/public/img/test-icon.png" alt="logo" height="38" width="38"/>
                        <p>The icon for your blog, used in your browser tab and elsewhere</p>
                    </div>

                    <div class="form-group">
                        <label for="email-address"><strong>Email Address</strong></label>
                        <input id="email-address" name="general[email-address]" type="text" value="{{email}}" />
                        <p>Address to use for <a href="#">admin notifications</a></p>
                        <label class="checkbox">
                            <input type="checkbox" value="1" name="general[public-email]" /> Show my email address on my public profile
                        </label>
                    </div>

                    <div class="form-group">
                        <label for="url-structure"><strong>URL Structure</strong></label>
                        <select id="url-structure" name="general[urlstructure]">
                            <option value="post-name">Simple Post Name</option>
                            <option value="date-based">Date Based</option>
                            <option value="number based">Number Based</option>
                            <option value="custom">Custom...</option>
                        </select>
                    </div>

                </fieldset>

                <hr />

                <fieldset>
                    <div class="form-group">
                        <label for="timezone"><strong>Time Zone</strong></label>
                        <select id="timezone" name="general[timezone]">
                            <option value="1">Vienna (UTC+1)</option>
                        </select>
                    </div>
                </fieldset>

            {{/with}}
            </form>
        </section>
    </section>

    <section id="content" class="settings-content">
        <header>
            <h2 class="title">Content</h2>
            <section class="page-actions">
                <button class="button-save">Save</button>
            </section>
        </header>
        <section class="content">
            <form id="settings-content">
                <fieldset>
                    <div class="form-group">
                        <label for="typography"><strong>Typography</strong></label>
                        <select id="typography" name="content[typography]">
                            <option value="post-name">Lato (Light)</option>
                        </select>
                        <p>Sexy sans-serif font that will make your toes tickle.</p>
                        <label class="checkbox">
                            <input type="checkbox" value="1" name="content[type-load-google]"/> Load fonts directly from Google
                        </label>
                    </div>

                    <div class="form-group">
                        <label><strong>Post Options</strong></label>
                        <label class="checkbox">
                            <input type="checkbox" name="content[display-post-meta]" value="1" /> Display Post Meta
                        </label>
                        <p>Post Author / Date / Views</p>

                        <label class="checkbox">
                            <input type="checkbox" name="content[show-author]" value="1" /> Show Author Box After Post
                        </label>
                        <label class="checkbox">
                            <input type="checkbox" name="content[comments]" value="1" /> Enable Comments
                        </label>
                    </div>
                </fieldset>

                <hr />

                <fieldset>
                    <div class="form-group">
                        <label for="seo-title"><strong>SEO Title Pattern</strong></label>
                        <input id="seo-title" name="content[seo-title]" type="text" value="[Post Name] - [Site Title]" />
                        <p>The pattern used to display your title tags</p>

                    </div>

                    <div class="form-group">
                        <label for="seo-description"><strong>SEO Description Pattern</strong></label>
                        <input id="seo-description" name="content[seo-description]" type="text" value="Auto" />
                        <p>The pattern used to display your meta descriptions</p>
                    </div>

                    <div class="form-group">
                        <label><strong>Google+</strong></label>
                        <label class="checkbox">
                            <input type="checkbox" name="content[google-profile]" value="1" /> Connect to author profile on Google
                        </label>

                    </div>

                    <div class="form-group">
                        <label for="blog-description"><strong>Home Page Description</strong></label>
                        <textarea id="blog-description"></textarea>
                    </div>

                </fieldset>

            </form>
        </section>
    </section>

    <section id="users" class="settings-content">
        <header>
            <h2 class="title">Users</h2>
            <section class="page-actions">
                <button class="button-add">New User</button>
            </section>
        </header>
        <section class="content">
            <section id="users-pending" class="user-group">
                <header class="user-group-header"><h3>Invited Users</h3></header>
                <ul class="users">
                    <li class="user">
                        <figure class="user-image invite"></figure>
                        <section class="user-meta">
                            <h4 class="user-name">Some Name</h4>
                            <span class="user-last-seen">Invitation Sent: 7 hours ago</span>
                        </section>
                    </li>
                </ul>
            </section>
            <section id="users-active" class="user-group">
                <header class="user-group-header">
                    <h3>Active Users</h3>

                    <form class="user-search">
                        <label>
                            <i class="search-icon"></i>
                            <input class="user-search-input" type="text"/>
                        </label>
                    </form>
                </header>

                <ul class="users">
                    <li class="user">
                        <figure class="user-image">
                            <img src="/public/img/user.jpg" alt="user"/>
                        </figure>
                        <section class="user-meta">
                            <h4 class="user-name">Some Name</h4>
                            <span class="user-last-seen">Last Seen: 7 hours ago</span>
                        </section>
                        <span class="user-role admin">Admin</span>
                    </li>
                    <li class="user">
                        <figure class="user-image">
                            <img src="/public/img/user.jpg" alt="user"/>
                        </figure>
                        <section class="user-meta">
                            <h4 class="user-name">Some Name</h4>
                            <span class="user-last-seen">Last Seen: 2 days ago</span>
                        </section>
                        <span class="user-role editor">Editor</span>
                    </li>
                </ul>
            </section>
        </section>
    </section>

    <section id="appearance" class="settings-content">
        <header>
            <h2 class="title">Appearance</h2>
        </header>
        <section class="content">
            <h6 class="sub">Raw json be here</h6>
            <p>Active theme: {{json settings.activeTheme}}</p>
            <p>Available themes: {{json availableThemes}}</p>
            <p>Available plugins: {{json availablePlugins}}</p>
        </section>
    </section>

    <section id="plugins" class="settings-content">
        <header>
            <h2 class="title">Plugins</h2>
            <section class="page-actions">
                <button class="button-add">Add Plugin</button>
            </section>
        </header>
        <section class="content">
            <section class="plugin-section">
                <header class="plugin-section-header">
                    <h3>Updates</h3>
                </header>
                <table class="plugin-section-table">
                    <tbody>
                        <tr class="plugin-section-item">
                            <td>
                                <figure class="plugin-icon">

                                </figure>
                                <section class="plugin-meta">
                                    <span class="plugin-title plugin-info">Ghost SEO</span>
                                    <span class="plugin-download-progress" data-complete="45">
                                        <span style="width: 45%"></span>
                                    </span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">Yoast</span>
                                    <span class="plugin-sub-info">yoast.com</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">v 0.1.13</span>
                                    <span class="plugin-sub-info">3 weeks ago</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info rating">
                                        <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
                                    </span>
                                    <span class="plugin-sub-info">48,200 users</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <button class="button-delete button-cancel">Cancel</button>
                                </section>
                            </td>
                        </tr>
                        <tr class="plugin-section-item">
                            <td>
                                <figure class="plugin-icon">

                                </figure>
                                <section class="plugin-meta">
                                    <span class="plugin-title plugin-info">Ghost SEO</span>
                                    <span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">Yoast</span>
                                    <span class="plugin-sub-info">yoast.com</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">v 0.1.13</span>
                                    <span class="plugin-sub-info">3 weeks ago</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info rating">
                                        <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
                                    </span>
                                    <span class="plugin-sub-info">48,200 users</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <button class="button-save">Update</button>
                                </section>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <footer class="plugin-section-footer">
                    <button class="button-alt button-update-all">Update All</button>
                </footer>
            </section>
            <section class="plugin-section">
                <header class="plugin-section-header">
                    <h3>Active Plugins</h3>
                </header>
                <table class="plugin-section-table">
                    <tbody>
                        <tr class="plugin-section-item">
                            <td>
                                <figure class="plugin-icon">

                                </figure>
                                <section class="plugin-meta">
                                    <span class="plugin-title plugin-info">Ghost SEO</span>
                                    <span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">Yoast</span>
                                    <span class="plugin-sub-info">yoast.com</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">v 0.1.13</span>
                                    <span class="plugin-sub-info">3 weeks ago</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info rating">
                                        <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
                                    </span>
                                    <span class="plugin-sub-info">48,200 users</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <a href="#" class="plugin-settings-icon"></a>
                                </section>
                            </td>
                        </tr>
                        <tr class="plugin-section-item">
                            <td>
                                <figure class="plugin-icon">

                                </figure>
                                <section class="plugin-meta">
                                    <span class="plugin-title plugin-info">Ghost SEO</span>
                                    <span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">Yoast</span>
                                    <span class="plugin-sub-info">yoast.com</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">v 0.1.13</span>
                                    <span class="plugin-sub-info">3 weeks ago</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info rating">
                                        <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
                                    </span>
                                    <span class="plugin-sub-info">48,200 users</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <a href="#" class="plugin-settings-icon"></a>
                                </section>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
            <section class="plugin-section">
                <header class="plugin-section-header">
                    <h3>Inactive Plugins</h3>
                </header>
                <table class="plugin-section-table">
                    <tbody>
                        <tr class="plugin-section-item inactive">
                            <td>
                                <figure class="plugin-icon">

                                </figure>
                                <section class="plugin-meta">
                                    <span class="plugin-title plugin-info">Ghost SEO</span>
                                    <span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">Yoast</span>
                                    <span class="plugin-sub-info">yoast.com</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info">v 0.1.13</span>
                                    <span class="plugin-sub-info">3 weeks ago</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <span class="plugin-info rating">
                                        <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
                                    </span>
                                    <span class="plugin-sub-info">48,200 users</span>
                                </section>
                            </td>
                            <td>
                                <section class="plugin-meta">
                                    <button class="button-add">Activate</button>
                                </section>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </section>
    </section>
</div>