<div class="d-flex align-items-baseline mb-2">
    <h6 class="font-weight-bold m-0">Available Clauses</h6>
    <div moe relative wide class="ml-3">
        <a href="#" start show>+ Add</a>
        <form url="{{ route("practice-management.api.clause.create") }}" class="frm-clause-add-edit">
            @csrf
            <div class="mb-2">
                <label class="text-secondary text-sm mb-1">Model</label>
                <input type="text" class="form-control form-control-sm" name="model" readonly value="{{$statTree->model}}">
            </div>
            <div class="mb-2">
                <label class="text-secondary text-sm mb-1">Question</label>
                <input type="text" class="form-control form-control-sm" name="question" autofocus>
            </div>
            <div class="mb-2">
                <label class="text-secondary text-sm mb-1">Answer</label>
                <input type="text" class="form-control form-control-sm" name="answer">
            </div>
            <div class="mb-2">
                <label class="text-secondary text-sm mb-1">Label</label>
                <input type="text" class="form-control form-control-sm" name="label" readonly>
            </div>
            <div class="mb-2">
                <label class="text-secondary text-sm mb-1">Clause Text</label>
                <input type="text" class="form-control form-control-sm" name="clauseText">
            </div>
            <div class="d-flex align-items-center">
                <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
                <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
            </div>
        </form>
    </div>
    <a href="#" class="clause-expand-all ml-3" title="Expand All"><i class="fa fa-angle-double-down text-secondary"></i></a>
    <a href="#" class="clause-collapse-all ml-2" title="Collapse All"><i class="fa fa-angle-double-up text-secondary"></i></a>
</div>
<div class="mb-3 overflow-auto clauses-view" id="clauses-view-{{$statTree->id}}">
    <ul>
    @foreach($clauses as $clause)
        <li>
            <div class="d-inline-flex align-items-baseline st-node clause" data-clause-id="{{$clause->id}}">
                <span class="flex-grow-1">{{$clause->label}}{{-- @if(count($clause->clauseArgs))<span class="text-sm text-secondary">({{count($clause->clauseArgs)}} arg{{count($clause->clauseArgs) !== 1 ? 's' : ''}})</span>@endif --}}</span>
            </div>
            <ul>
                <li data-type="meta" data-jstree='{"icon":"fa fa-laptop-code text-primary text-sm"}'>{{$clause->clause_text}}</li>
                @if($clause->clauseArgs && count($clause->clauseArgs))
                    @foreach($clause->clauseArgs as $clauseArg)
                        <li data-type="meta" data-jstree='{"icon":"fa fa-cubes text-info"}'>{{$clauseArg->arg_text}} <span class="text-secondary text-sm">({{$clauseArg->field_type}})</span></li>
                    @endforeach
                @endif
            </ul>
        </li>
    @endforeach
    </ul>
</div>


<div class="border mb-3 p-2 position-absolute" style="left: -10000px; top: -10000px;">
    <ul>
        @foreach($clauses as $clause)
            <div class="d-inline-flex align-items-baseline">
                <span class="flex-grow-1">{{$clause->label}}</span>
                <div moe center relative wide class="ml-3 mr-2 edit-clause-moe-{{$clause->id}}">
                    <a href="#" start show><i class="text-sm fa fa-edit on-hover-opaque"></i></a>
                    <form url="{{ route("practice-management.api.clause.update") }}" class="frm-clause-add-edit" center>
                        @csrf
                        <input type="hidden" name="uid" value="{{$clause->uid}}">
                        <div class="mb-2">
                            <label class="text-secondary text-sm mb-1">Model</label>
                            <input type="text" class="form-control form-control-sm" name="model" value="{{@$clause->model}}">
                        </div>
                        <div class="mb-2">
                            <label class="text-secondary text-sm mb-1">Question</label>
                            <input type="text" class="form-control form-control-sm" name="question" value="{{@$clause->question}}">
                        </div>
                        <div class="mb-2">
                            <label class="text-secondary text-sm mb-1">Answer</label>
                            <input type="text" class="form-control form-control-sm" name="answer" value="{{@$clause->answer}}">
                        </div>
                        <div class="mb-2">
                            <label class="text-secondary text-sm mb-1">Label</label>
                            <input type="text" class="form-control form-control-sm" name="label" readonly value="{{@$clause->label}}">
                        </div>
                        <div class="mb-2">
                            <label class="text-secondary text-sm mb-1">Clause Text</label>
                            <input type="text" class="form-control form-control-sm" name="clauseText" value="{{@$clause->clause_text}}">
                        </div>
                        <div class="d-flex align-items-center">
                            <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
                            <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                        </div>
                    </form>
                </div>
                <div moe relative center class="remove-clause-moe-{{$clause->id}}">
                    <a href="#" start show><i class="text-sm fa fa-trash-alt on-hover-opaque text-danger"></i></a>
                    <form url="{{ route("practice-management.api.clause.remove") }}" center>
                        @csrf
                        <input type="hidden" name="uid" value="{{$clause->uid}}">
                        <p>Are you sure?</p>
                        <div class="d-flex align-items-center">
                            <button class="btn btn-sm btn-danger mr-2" type="button" submit>Remove</button>
                            <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                        </div>
                    </form>
                </div>
                <div moe relative center class="add-clause-arg-moe-{{$clause->id}}">
                    <a href="#" start show><i class="text-sm fa fa-trash-alt on-hover-opaque text-danger"></i></a>
                    <form url="{{ route("practice-management.api.clauseArg.create") }}" center>
                        @csrf
                        <input type="hidden" name="clauseId" value="{{$clause->id}}">
                        <div class="mb-2">
                            <label class="text-secondary text-sm mb-1">Arg Text</label>
                            <input type="text" class="form-control form-control-sm" name="argText" required>
                        </div>
                        <div class="mb-2">
                            <label class="text-secondary text-sm mb-1">Field Type</label>
                            <select class="form-control form-control-sm" name="fieldType" required>
                                <option value="">-- select --</option>
                                <option value="number">Number</option>
                                <option value="date">Date</option>
                                <option value="string">String</option>
                                <option value="bool">Boolean</option>
                            </select>
                        </div>
                        <div class="d-flex align-items-center">
                            <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
                            <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        @endforeach
    </ul>
</div>
