@include('layouts.header')

    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
            <h4>{{ $device->webhook === url('/api/webhook') ? $device->sender : '(' . __('Custom url') . ') ' . $device->webhook }}</h4>
            </div>
            <div class="content-body">
                <!-- devices show start -->
                <section class="app-device-show">
                    <!-- show and filter start -->
                    <!-- <div class="card"> -->
                        <div class="row">
                            <div class="col-md-12">
                            <form action="{{ route('webhook.save', ['device_id' => $device->id]) }}" method="POST" class="add-new-device modal-content pt-0">
                            @csrf
                                <div class="card border-primary">
                                    <textarea id="content" name="content">{{$content}}</textarea>
                                </div>
                                @if($device->webhook === url('/api/webhook'))
                                <button type="submit" class="btn btn-primary me-1 data-submit">{{ __('Save') }}</button>
                                <br>
                                <a href="{{ route('webhook.reset', ['device_id' => $device->id]) }}" class="btn btn-warning me-1 data-submit">{{ __('Reset') }}</a>
                                <label class="form-label text-warning">{{ __('_MsgWebhookReset') }}</label>
                                @endif
                            </form>
                            </div>
                        </div>
                    <!-- </div> -->
                    <!-- show and filter end -->
                </section>
                <!-- devices show ends -->
            </div>
        </div>
    </div>
    <!-- END: Content-->

    <!-- BEGIN: Vendor JS-->
    <script src="app-assets/vendors/js/vendors.min.js"></script>
    <script src="app-assets/vendors/js/codemirror/lib/codemirror.js"></script>
    <script src="app-assets/vendors/js/codemirror/mode/clike/clike.js"></script>
    <script src="app-assets/vendors/js/codemirror/mode/css/css.js"></script>
    <script src="app-assets/vendors/js/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="app-assets/vendors/js/codemirror/mode/javascript/javascript.js"></script>
    <script src="app-assets/vendors/js/codemirror/mode/php/php.js"></script>
    <script src="app-assets/vendors/js/codemirror/mode/xml/xml.js"></script>
    <link rel="stylesheet" href="app-assets/vendors/js/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="app-assets/vendors/js/codemirror/theme/dracula.css">
    <!-- BEGIN Vendor JS-->

    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
            mode: "php",
            theme: "dracula",
            lineNumbers: true,
            autoCloseTags: true,
        });
        editor.setSize(null, "800");
    </script>

@include('layouts.footer')
