@using TightWiki.Models
@model TightWiki.Models.ViewModels.Admin.AddEmojiViewModel
@{
    Layout = "/Views/Shared/_Layout.cshtml";
    var sessionState = ViewData["SessionState"] as TightWiki.SessionState ?? throw new Exception("Wiki State Context cannot be null.");
}

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', (event) => {

        const imageData = document.getElementById('ImageData');
        const categories = document.getElementById('Categories');
        const name = document.getElementById('Name');

        imageData.addEventListener('change', (event) => {
            const selectedFile = event.target.files[0];
            name.value = selectedFile.name.substr(0, selectedFile.name.lastIndexOf('.')).replace(/ /g, '-').replace(/_/g, '-');
            categories.value = name.value.replace(/-/g, ',');
        });
    });
</script>

<h3>
    Add Emoji
</h3>

<p>
    Configuration to add an emoji.<br /><br />
</p>

@if (!string.IsNullOrEmpty(Model.ErrorMessage))
{
    <div class="alert alert-danger">@Html.Raw(Model.ErrorMessage)</div>
}
@if (!string.IsNullOrEmpty(Model.SuccessMessage))
{
    <div class="alert alert-success">@Html.Raw(Model.SuccessMessage)</div>
}

@using (Html.BeginForm(null, null, null, FormMethod.Post, true, new { action = $"{GlobalConfiguration.BasePath}{Context.Request.Path}", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.OriginalName)
    @Html.HiddenFor(model => model.Id)
    <div class="container">
        <form>
            <div class="form-group row mb-1">
                <label for="ImageData" class="col-sm-2 col-form-label"><strong>Image</strong></label>
                <div class="col-sm-10">
                    <input type="file" id="ImageData" name="ImageData" class="form-control-file" onchange="fileCheck(this);" accept="image/png, image/jpeg, image/gif" />
                </div>
            </div>

            <div class="form-group row mb-1">
                <label for="Name" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => m.Name)</strong></label>
                <div class="col-sm-10">
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "required" })
                    <div class="text-danger">@Html.ValidationMessageFor(m => m.Name)</div>
                </div>
            </div>

            <div class="form-group row mb-1">
                <label for="Categories" class="col-sm-2 col-form-label"><strong>@Html.LabelFor(m => m.Categories)</strong> (comma separated)</label>
                <div class="col-sm-10">
                    @Html.TextBoxFor(m => m.Categories, new { @class = "form-control" })
                    <div class="text-danger">@Html.ValidationMessageFor(m => m.Categories)</div>
                </div>
            </div>

            <div class="form-group row mb-1">
                <div class="col-sm-10 offset-sm-2">
                    <button type="submit" class="btn btn-success rounded-0">Save!</button>
                </div>
            </div>
        </form>
    </div>
}
<br />