<div class="page-header">
    <h1>{{languages.title}}</h1>
</div>

<div class="category-edit-container">
    <div class="preview-section">
        <div class="preview-card">
            <img class="thumb-prev" id="thumbprev" src="/thumbs/categories/{{params.id}}.png" />
            <div class="thumbnail-upload">
                <form name="texupload" action="/categories/uploadthumb" enctype="multipart/form-data" method="post" onsubmit="return validateUpload()">
                    <label for="thumb-to-upload">Upload Thumbnail (153 x 153 pixels)</label>
                    <div class="upload-controls">
                        <input type="file" id="thumb-to-upload" name="file-to-upload" accept="image/png" onchange="setImageReady()">
                        <input type="hidden" id="modelid" name="modelid" value="{{params.id}}">
                        <button type="submit" class="button button-secondary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <form action="/categories/edit" method="post" class="category-form">
        <div class="form-section">
            <div class="form-group">
                <input type="hidden" id="id" name="id" value="{{params.id}}">
            </div>

            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" id="title" name="title" value="{{params.title}}" required>
            </div>

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="menu" name="menu" value="{{params.menu}}" {{checked params.menu}}>
                    <span>Show in Menu</span>
                </label>
            </div>

            <div class="form-group">
                <h2>Executive List</h2>
                <div class="helper-text">
                    <span class="material-icons">info</span>
                    <span>Executive list is ignored when "Show in Menu" is checked. Email addresses should be comma separated without spaces.</span>
                </div>
                <textarea 
                    name="executive" 
                    rows="10" 
                    placeholder="input emails, separated with comma"
                >{{params.executive}}</textarea>
            </div>

            {{>translations}}

            <div class="form-actions">
                <button type="submit" class="button button-primary">Update</button>
            </div>
        </div>
    </form>
</div>

<div class="bottom-actions">
    <form action="/categories/delete/" method="POST" 
        onsubmit="return confirm('Are you sure you want to permanently delete this category?')" 
        class="delete-form">
        <input type="hidden" id="id" name="id" value="{{params.id}}">
        <button type="submit" class="button button-danger">
            <span class="material-icons">delete</span>
            Delete
        </button>
    </form>
    <button onclick="window.location.href='/categories'" class="button button-secondary">Cancel</button>
</div>

<script>
    function startup() {
        var id = document.getElementById("id").value;
        if (id == 'new') {
            document.getElementById('bb').style.display = 'none';
            document.getElementById('submit').innerHTML = 'Create';
        }
    }
    
    $('input[type="checkbox"]').change(function(){
        this.value = (Number(this.checked));
    });
</script>