@model List<HotelContracts.ViewModels.CleaningInstrumentsViewModel>
@{
    ViewData["Title"] = "Инструменты для уборки";
    Layout = "_Layout";
}

<div class="">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="create">
        Добавить инструмент уборки
    </button>
    @{
        <ul class="demo-list-two mdl-list">
            @foreach (var item in Model)
            {
                <li class="mdl-list__item">
                    <span class="mdl-list__item-primary-content">
                        <i class="material-icons mdl-list__item-icon">cleaning_services</i>
                        #@item.Id - @item.Type
                    </span>
                    <a 
                        href="/Home/DeleteInstrument?id=@item.Id"
                        class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                        Удалить
                    </a>
                </li>
            }
        </ul>
    }
    <dialog class="mdl-dialog">
        <h4 class="mdl-dialog__title">Добавление иструмента</h4>
        <form method="post" asp-controller="Home" asp-action="CreateCleaningInstrument">
            <div class="mdl-dialog__content">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" id="secondName" name="type">
                    <label class="mdl-textfield__label" for="secondName">Название</label>
                </div>
            </div>
            <div class="mdl-dialog__actions">
                <button type="submit" class="mdl-button">Добавить</button>
                <button type="button" class="mdl-button close">Отмена</button>
            </div>
        </form>
    </dialog>
</div>
<script>
    const dialog = document.querySelector('dialog');
    const showDialogButton = document.querySelector('#create');

    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
</script>