<section class="so-social-promo sosocial-orange white-text admin-pages">
    <div class="container">
        <h1>Edit Article</h1>
    </div>
</section>
<main class="so-social-main-content">
    <form action="/admin/articles/{{article.id}}/edit" id="article-edit" method="post" enctype="multipart/form-data">
        <div class="content overlap">
            <section class="one-column page-content sidebar-right">
                <div class="breadcrumb">
                    <a href="/">Home</a>
                    <a href="/admin">Admin</a>
                    <a href="/admin/articles">Articles</a>
                    <a href="javascript:void(0)">Edit</a>
                </div>
                {{! Field - Article Title }}
                <label for="title">Article Title:</label>
                <input autocomplete="off" class="form-control" id="title" name="title" required type="text" value="{{ article.title }}" />
        
                {{! Field - Tags }}
                <label for="tags">Tags:</label>
                <input autocomplete="off" class="tagsinput" id="tags" name="tags" type="text" value="{{ article.tags }}" />
         
                {{! Field - Existing Image URL }}
                <div class="existing-image callout">
                <label>Existing Image:</label>
                <img src="{{imageCdn article.image article.imageVersion 'articleEdit'}}" alt="{{article.title}}" class="article-grid-image" />
                </div>
                {{! Field - Replace Image URL }}
                <label for="image">Replace Current Image:</label>
                <input class="form-control" type="file" name="image" />
            

                <ul class="accordion-tabs">
                    <li class="tab-header-and-content">
                        <a href="javascript:void(0)" class="is-active tab-link">Body</a>
                        <div class="tab-content">
                            {{! Field - Body }}
                            <textarea class="form-control wysiwyg"" id="editor" name="body" required>{{{ article.body }}}</textarea>
                        </div>
                    </li>
                    <li class="tab-header-and-content">
                        <a href="javascript:void(0)" class="tab-link">Excerpt</a>
                        <div class="tab-content">
                            {{! Field - Excerpt }}
                            <textarea class="form-control wysiwyg"" id="excerpt" name="excerpt" required>{{{ article.excerpt }}}</textarea>
                        </div>
                    </li>
                </ul>

            </section>
            <aside class="sidebar-right">
                <div class="sidebar-content">
                    {{! Field - Status }}
                    {{> articles/article-status}}

                    {{! Field - Category }}
                    {{> articles/article-categories}}

                    {{! Field - Author }}
                    {{> articles/article-author}}
                </div>

                <!-- Meta -->
                <div class="sidebar-content">
                    {{! Field - Article Meta Title }}
                    <label for="meta_title">Meta Title:</label>
                    <input autocomplete="off" class="form-control" id="meta_title" name="meta_title" required type="text" value="{{ article.meta.title }}" />

                    {{! Field - Article Meta Description }}
                    <label for="meta_description">Meta Description:</label>
                    <textarea class="form-control" id="meta_description" name="meta_description">{{ article.meta.description }}</textarea>

                    {{! Field - Article Meta Keywords }}
                    <label for="meta_keywords">Meta Keywords:</label>
                    <textarea class="form-control" id="meta_keywords" name="meta_keywords">{{ article.meta.keywords }}</textarea>
                </div>

                <div class="sidebar-content">
                    {{! Field - Article Alternative Style }}
                    <input {{#is article.alternativeStyle true}} checked {{/is}} id="alternativeStyle" type="checkbox" name="alternativeStyle" value="1">
                    <label for="alternativeStyle"><span></span>Alternative Style</label>
                    {{! SUBMIT Button }}
                    <button type="submit" class="button button-wide-100 button-green">Update Article</button>

                    <a class="button button-wide-100 button-red" onclick="javascript:DeleteAlert();" href="javascript:void(0)">Delete Article</a>
                </div>
            </aside>
        </div>
    </form>
</main>
<script type="text/javascript">
    function DeleteAlert() {
        var YesDelete = confirm ("Are you sure you want to delete this article?");
        if (YesDelete) {
            $.post( "/admin/articles/{{article.id}}/delete", function( data ) {
               console.log(data);
                window.location.href ='/admin/articles';
            });
        };
    };
</script>