@extends('layouts.modal')
@section('content')

<div class="modal-header">
    <div class="usermodal_header">
        <div class="usermodal-left">
            <h1>You are about to make a duplicate of "{{ $template->form_name }}"
            </h1>
        </div>
        <div class="close float-right" data-bs-dismiss="modal" aria-label="Close">
            <svg class="no-stroke" width="12" height="11" viewBox="0 0 12 11" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M11.3332 1.24128L10.2589 0.166992L5.99984 4.42604L1.74079 0.166992L0.666504 1.24128L4.92555 5.50033L0.666504 9.75937L1.74079 10.8337L5.99984 6.57461L10.2589 10.8337L11.3332 9.75937L7.07412 5.50033L11.3332 1.24128Z"
                    fill="#000000" />
            </svg>
            Close
        </div>
    </div>
</div>
<div class="modal-body">
    <form action="{{ route('form.cloneform') }}" class="process-form" method="POST">
        @csrf
        <p>Please enter a new form name below. This will also be used for the form URL.</p>
        <div class="form-group">
            <label for="form_name">Form Name</label>
            <input type="text" id="form_name" name="form_name" class="form-control" placeholder="Enter here..." required>
           
            <span id="form_nameError" style="color: red;"></span>
        </div>
        <input type="hidden" id="templateId" name="templateId" value='{{ $template->id }}'>
    <button class="btn-theme btn-small dark one_btn btn-save-data float-right" style="float:right">
        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M5.24993 7.94639L2.62671 5.32317L2.44994 5.14639L2.27316 5.32317L1.33982 6.2565L1.16305 6.43328L1.33982 6.61005L5.07316 10.3434L5.24993 10.5202L5.42671 10.3434L13.4267 2.34339L13.6035 2.16661L13.4267 1.98983L12.4934 1.0565L12.3166 0.879723L12.1398 1.0565L5.24993 7.94639Z"
                fill="white" stroke="white" stroke-width="0.5" />
        </svg>
        Save
    </button>
    
</div>
</div>
</form>
<div id="uncheck_studio_msg">
    @include('includes.popup_message')
</div>
</div>

@endsection
<style type="text/css">
    .change-roles .btn.dropdown-toggle  {
        padding-left: 20px !important;
    }
</style>