@model IEnumerable<Movie>

@(Html
    .Grid(Model)
    .Build(columns =>
    {
        columns.Add(model => model.Title).Titled("Title");
        columns.Add(model => model.ReleaseDate).Titled("ReleaseDate").Formatted("{0:d}");
        columns.Add(model => model.Genre).Titled("Genre");
        columns.Add(model => model.Price).Titled("Price");
        columns.Add(model => $"<button data-id=\"{model.Id}\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#exampleModal\" " +
            $"data-title=\"{model.Title}\" data-releaseDate=\"{model.ReleaseDate}\" data-genre=\"{model.Genre}\" data-price=\"{model.Price}\">Edit</button>").Encoded(false);
    })
)

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-title" class="col-form-label">Title:</label>
                        <input type="text" class="form-control" id="recipient-title" name="title">
                        <input type="hidden" id="recipient-id" name="id" />
                    </div>
                    <div class="form-group">
                        <label for="recipient-releaseDate" class="col-form-label">ReleaseDate:</label>
                        <input type="date" class="form-control" id="recipient-releaseDate" name="releaseDate" />
                    </div>
                    <div class="form-group">
                        <label for="recipient-genre" class="col-form-label">Genre:</label>
                        <input type="text" class="form-control" id="recipient-genre" name="genre" />
                    </div>
                    <div class="form-group">
                        <label for="recipient-price" class="col-form-label">Price:</label>
                        <input type="text" class="form-control" id="recipient-price" name="price" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" value="Save" />
                </div>
            </form>
        </div>
    </div>
</div>

@section scripts{
    <script>
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var title = button.data('title');
            var releaseDate = button.data('releaseDate');
            var genre = button.data('genre');
            var price = button.data('price');
            var modal = $(this);
            modal.find('.modal-body input[name="id"]').val(id);
            modal.find('.modal-body input[name="title"]').val(title);
            modal.find('.modal-body input[name="releaseDate"]').val(releaseDate);
            modal.find('.modal-body input[name="genre"]').val(genre);
            modal.find('.modal-body input[name="price"]').val(price);
        })
    </script>
}