@using BuildFeed.Model
@model MetaItemModel
@{
    ViewBag.Title = $"Add metadata for {Model.Id.Value} | {InvariantTerms.SiteName}";
}

@section head
{
    <link href="~/Scripts/trumbowyg/ui/trumbowyg.min.css" rel="stylesheet" type="text/css" />
}

<h1>@($"Add metadata for {Model.Id.Value}")</h1>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.HiddenFor(model => model.Id.Type)
    @Html.HiddenFor(model => model.Id.Value)

    <div class="form-group">
        @Html.LabelFor(model => model.MetaDescription)
        <div class="wide-group">
            @Html.TextAreaFor(model => model.MetaDescription, new
            {
                rows = "4"
            })
            <div>
                <span id="meta-count">0</span> characters
                @Html.ValidationMessageFor(model => model.MetaDescription)
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.PageContent)
        <div class="wide-group">
            @Html.TextAreaFor(model => model.PageContent)
            <div>
                @Html.ValidationMessageFor(model => model.PageContent)
            </div>
        </div>
    </div>

    <div class="form-group">
        <span class="label-placeholder"></span>
        <div>
            <input type="submit" value="Add metadata" />
        </div>
    </div>
}

@section Scripts
{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="~/Scripts/trumbowyg/trumbowyg.min.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js" integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js" integrity="sha256-g1QKGxqsp+x5JkuN/JjHl96je2wztgS5Wo4h4c7gm9M=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        function updateMetaCount()
        {
            var count = document.getElementById("@Html.IdFor(model => model.MetaDescription)").value.length;
            $("#meta-count").text(count.toFixed(0));
            if (count === 0)
            {
                $("#meta-count").attr("class", "");
            }
            else if (count < 160)
            {
                $("#meta-count").attr("class", "text-success");
            }
            else
            {
                $("#meta-count").attr("class", "text-danger");
            }
        }

        $(function()
        {
            $.trumbowyg.svgPath = "/Scripts/trumbowyg/ui/icons.svg";

            $("#@Html.IdFor(model => model.PageContent)")
                .trumbowyg({
                    autogrow: true,
                    btns: [
                        ['strong', 'em'],
                        '|', 'link',
                        '|', ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                        '|', ['unorderedList', 'orderedList'],
                        '|', 'viewHTML',
                        '|'
                    ]
                });

            $("#@Html.IdFor(model => model.MetaDescription)")
                .keyup(function()
                {
                    updateMetaCount();
                });

            updateMetaCount();
        });
    </script>
}