@model IEnumerable<WebfrontCore.ViewModels.ConfigurationFileInfo>
@{
    ViewData["Title"] = Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_TITLE"];
    var noticeText = Utilities.CurrentLocalization.LocalizationIndex["WEBFRONT_CONFIGURATION_SAVING_CHANGES"];
    static string FormatHtmlId(string value) => value?.Replace(".", "").Replace(" ", "_");
}

@section styles
{
    <link rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/atom-one-dark.min.css">

}

<div class="content mt-0">
    <h4 class="content-title mt-20 mb-0">@ViewData["Title"]</h4>
    <span class="text-muted">@noticeText</span>

    @foreach (var file in Model.OrderByDescending(f => f.FileName.Contains("IW4MAdmin")))
    {
        <div class="card m-0 p-0 mt-20 mb-20">
            <div class="bg-primary p-10 rounded-top text-light">
                <i class="oi oi-expand-down mr-5 expand-file-icon" data-editor-id="#edit_file_@FormatHtmlId(file.FileName)"></i>
                <span>@file.FileName</span>
            </div>
            <div class="edit-file d-none flex-column" id="edit_file_@FormatHtmlId(file.FileName)" data-file-name="@file.FileName">
                <pre class="mt-0 font-size-12 flex-fill border-bottom" spellcheck="false"><code class="code language-json editable" contenteditable="true" id="edit_file_code_@FormatHtmlId(file.FileName)">@file.FileContent</code></pre>
                <button type="button" class="btn btn-primary m-15  mt-0 align-self-start file-save-button" data-file-name="@file.FileName">Save</button>
            </div>
        </div>
    }
</div>

@section scripts
{
    <!-- I don't want to include the entire highlight js into the bundle for this 1 page -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
    <script>
            if (hljs !== undefined) {
             hljs.highlightAll();
            }
        </script>

    <environment include="Development">
        <script type="text/javascript" src="~/js/configuration.js"></script>
    </environment>
}