@using System.ComponentModel
@using Newtonsoft.Json
@using System.Text; 
@model UAC

<a href="/">home</a>/
@Html.Raw(ViewData["breadcrumbs"])

<table class="table">
  <tbody>
    <tr>
      <th scope="row">Display Name</th>
      <td><input class="form-control" type="text" value="@Model.DisplayName" id="displayName"/></td>
    </tr>
    <tr>
      <th scope="row">Description</th>
      <td>@Html.Raw(Model.Description)
    </tr>
    <tr>
      <th scope="row">Channels</th>
      <td>
          <div id="channelsTree"></div>
      </td>
    </tr>
    <tr>
      <th scope="row">Users</th>
      <td>
          <div id="usersTree"></div>
      </td>
    </tr>
    <tr>
      <th scope="row">AccountInChannels</th>
      <td>
          <div id="accountsTree"></div>
      </td>
    </tr>
    <tr>
      <th scope="row">Translations (@Model.Translations?.Count)</th>
      <td>
        <table class="table">
            <tbody>
              @for(var i = 0; i < (Model.Translations?.Count() ?? 0); i++)
              {
                  <tr>
                     <td><input type="text" name="Model.Translations[@i].Key" value="@Model.Translations.ElementAt(i).Key" /></td>
                     <td><input type="text" name="Model.Translations[@i].Value" value="@Model.Translations.ElementAt(i).Value" /></td>
                     <td><button type="button" class="btn btn-danger" onclick="removeTranslation(@i)">delete</button></td>
                  </tr>
              }
            <tr>
            <td colspan="3">
                <button type="button" class="btn btn-primary" onclick="addUAC_Translation()">add translation</button>
            </td>
            </tr>
            </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <th scope="row">Command Alterations (@Model.CommandAlterations?.Count)</th>
      <td>
        <table class="table">
            <tbody>
                     @Html.Raw("<tr><td colspan=\"3\">o_O</td></tr>");
                     @Html.Raw("<tr>");
                     @Html.Raw("<td><input type=\"text\" name=\"Model.CommandAlterations[{j}].Key\" value=\"{Model.CommandAlterations.ElementAt(j).Key}\" /></td>");
                     @Html.Raw("<td><input type=\"text\" name=\"Model.CommandAlterations[{j}].Value\" value=\"{Model.CommandAlterations.ElementAt(j).Value}\" /></td>");
                     @Html.Raw("<td><button type=\"button\" class=\"btn btn-danger\" onclick=\"removeCommandAlteration()\">delete</button></td>");
                     @Html.Raw("</tr>");

            <tr>
            <td colspan="3">
                <button type="button" class="btn btn-primary" onclick="addUAC_CommandAlteration()">add alteration</button>
            </td>
            </tr>
            </tbody>
        </table>
        </td>
    </tr>
    <tr>
        <td colspan="2"><button class="btn btn-success">asdf</button></td>
    </tr>
    </tbody>
</table>

"adam", you may say, "why are there both translations and command alterations?"<br />
translations are like.. if someone says "addicting", you can safely guess that they don't know they should be saying "addictive".<br />
so if you say "this game is addicting", that comes in, we just pretend you said "this game is addictive".<br />
Command alterations, I have to acknowledge that you *did* say !freedomunits, but I'm changing my behavior and not converting. <br />
I guess theoretically you could "translate" freedomunits to nothing, then freeerdumberunits to freedomunits? but if we're doing that it becomes necessary to care about order, and get that right.<br />
so let's say, "translations" are "i'll pretend you said", and "command alterations" are "i'll pretend I expected".

<div id="link-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Insert GUID</h5>
        <button type="button" class="btn btn-close" data-dismiss="link-modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
            <ul>
              <li>//TODO: search</li>
            </ul>
        </p>
        <p>
          <input id="addmodaltext" type="text" />
        </p>
      </div>
      <div class="modal-footer">
        <button id="modalsubmit" type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="link-modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="unlink-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm</h5>
        <button type="button" class="btn-close" data-dismiss="unlink-modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
            are you sure you want to unlink
            <input id="unlinkModalText" enabled="false" type="text" />
        </p>
        <p>
            to be clear; this is going to "unlink", not like.. delete.
        </p>
      </div>
      <div class="modal-footer">
        <button id="modalsubmit" type="button" class="btn btn-danger">unlink</button>
        <button type="button" class="btn btn-secondary" data-dismiss="unlink-modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="remove-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm</h5>
        <button type="button" class="btn-close" data-dismiss="remove-modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
            are you sure you want to delete
            <input id="removeModalText" enabled="false" type="text" />
        </p>
      </div>
      <div class="modal-footer">
        <button id="modalsubmit" type="button" class="btn btn-danger">delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="remove-modal">Close</button>
      </div>
    </div>
  </div>
</div>

@section Scripts{
  <script type="text/javascript">
  function linkModal(submitFn)
  {
      let modalbutton = document.querySelector("#link-modal button#modalsubmit");
      modalbutton.onclick = () => { linkSubmitModal(submitFn); };
      $("#link-modal").modal("show");
  }
  function linkSubmitModal(submitFn)
  {
    let guid = document.querySelector("#link-modal #addmodaltext").value;
    submitFn(guid, () => { window.location.reload(); });
    $("#link-modal").modal("hide");
    console.log(submitFn + "(guid)");
  }
  function unlinkModal(submitFn, target)
  {
    document.querySelector("#unlink-modal #removeModalText").value = target;
    let modalbutton = document.querySelector("#unlink-modal button#modalsubmit");
    modalbutton.onclick = () => { unlinkModalSubmit(submitFn, target); };
    $("#remove-modal").modal("show");
  }
  function unlinkModalSubmit(submitFn, target)
  {
    submitFn(target, () => { window.location.reload(); });
    $("#unlink-modal").modal("hide");
  }
  function removeModal(submitFn, idx)
  {
    document.querySelector("#remove-modal #removeModalText").value = target;
    let modalbutton = document.querySelector("#remove-modal button#modalsubmit");
    modalbutton.onclick = () => { removeModalSubmit(submitFn, idx); };
    $("#remove-modal").modal("show");
  }
  function removeModalSubmit(submitFn, idx)
  {
    submitFn(idx, () => { window.location.reload(); });
    $("#remove-modal").modal("hide");
  }
  function channelsTree() {
    @{
      var sb = new StringBuilder();
      sb.Append("[{text: \"Channels\", \"expanded\":true, nodes: [");

      sb.Append($"{{text: \"<button type=\\\"button\\\" class=\\\"btn btn-primary\\\" onclick=\\\"linkModal(linkUAC_Channel)\\\">add channel</button>\"}}");
      foreach (var acc in Model.Channels?.OrderBy(a => a.DisplayName))
      {
        sb.Append(',');
        sb.Append($"{{text: \"<a href=\\\"/Channels/Details/{acc.Id}\\\">{acc.DisplayName}</a> - <button type=\\\"button\\\" class=\\\"btn btn-danger\\\" onclick=\\\"unlinkModal(unlinkUAC_Channel, '{acc.Id}')\\\">remove</button>\"}}");
      }
      sb.Append("]}]");
    }
    var tree = @Html.Raw(sb.ToString());
    return tree;
  }
  function usersTree() {
    @{
      sb = new StringBuilder();
      sb.Append("[{text: \"Users\", \"expanded\":true, nodes: [");

      sb.Append($"{{text: \"<button type=\\\"button\\\" class=\\\"btn btn-primary\\\" onclick=\\\"linkModal(linkUAC_User)\\\">add user</button>\"}}");
      foreach (var acc in Model.Users?.OrderBy(a => a.DisplayName))
      {
        sb.Append(',');
        sb.Append($"{{text: \"<a href=\\\"/Users/Details/{acc.Id}\\\">{acc.DisplayName}</a> - <button type=\\\"button\\\" class=\\\"btn btn-danger\\\" onclick=\\\"unlinkModal(unlinkUAC_User, '{acc.Id}')\\\">remove</button>\"}}");
      }
      sb.Append("]}]");
    }
    var tree = @Html.Raw(sb.ToString());
    return tree;
  }
  function accountsTree() {
    @{
      sb = new StringBuilder();
      sb.Append("[{text: \"Accounts\", \"expanded\":true, nodes: [");

      sb.Append($"{{text: \"<button type=\\\"button\\\" class=\\\"btn btn-primary\\\" onclick=\\\"linkModal(linkUAC_Account)\\\">add account</button>\"}}");
      foreach (var acc in Model.AccountInChannels?.OrderBy(a => a.DisplayName))
      {
        sb.Append(',');
        sb.Append($"{{text: \"<a href=\\\"/Accounts/Details/{acc.Id}\\\">{acc.DisplayName}</a> - <button type=\\\"button\\\" class=\\\"btn btn-danger\\\" onclick=\\\"unlinkModal(unlinkUAC_Acocunt, '{acc.Id}')\\\">remove</button>\"}}");
      }
      sb.Append("]}]");
    }
    var tree = @Html.Raw(sb.ToString());
    return tree;
  }

  $('#channelsTree').bstreeview({ data: channelsTree() });
  $('#usersTree').bstreeview({ data: usersTree() });
  $('#accountsTree').bstreeview({ data: accountsTree() });

  var components = window.location.pathname.split('/');
  var uacId = components[3];

  </script>
}