{{-- Modal --}}
<div class="modal fade text-left modal-primary" id="add_requester_template" role="dialog"
    aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Adicione um template </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="requester-template-form">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label>Modalidades: </label>
                            <div class="form-group">
                                <select data-placeholder="Escolha uma modalidade" class="select2 form-control" id="templateCategory" name="templateCategory" required>
                                    <option value=""></option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label>Nome: </label>
                            <div class="form-group">
                                <input type="text" class="form-control" id="templateName" name="templateName"
                                    placeholder="Digite o nome" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label>Conteúdo: </label>
                            <div class="form-group">
                                <textarea class="form-control" name="templateContent" id="templateContent" required></textarea>
                            </div>
                        </div>
                    </div>
                    <span id="requester-template-form-errors"></span>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button class="btn btn-primary" id="requester-template-btn">Adicionar</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal para editar um template --}}
<div class="modal fade text-left modal-primary" id="modal_edit_template" role="dialog"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Editar template </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="templates-form-edit">
                <input type="hidden" name="template_id_edit" id="template_id_edit">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label>Modalidades: </label>
                            <div class="form-group">
                                <select data-placeholder="Escolha uma modalidade" class="select2 form-control" id="templateCategory_edit" name="templateCategory_edit"
                                    required>
                                    <option value=""></option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label>Nome: </label>
                            <div class="form-group">
                                <input type="text" class="form-control" name="templateName_edit"
                                    id="templateName_edit" value="" placeholder="Digite o nome" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label>Conteúdo: </label>
                            <div class="form-group">
                                <textarea class="form-control" name="templateContent_edit" id="templateContent_edit" value=""
                                    placeholder="Digite o conteúdo" required></textarea>
                            </div>
                        </div>
                    </div>
                    <span id="requester-template-edit-form-errors"></span>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button class="btn btn-primary" id="template-edit-btn">Atualizar</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal para exibir o conteúdo de um template --}}
<div class="modal fade text-left modal-primary" id="modalContentTemplate"
    role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Conteúdo do
                    Template</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <textarea class="form-control" name="templateContentShow" id="templateContentShow"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">Fechar
                </button>
            </div>
        </div>
    </div>
</div>