<div class="tab-pane fade show active" id="v-brief" role="tabpanel" aria-labelledby="v-brief-tab">
    <div class="row p-3">
        <p class="h6">Brief History</p>
        <div class="col-2 align-self-center">
            <span>Component Name :</span>
        </div>
        <div class="col-10">
            <input type="text" class="form-control">
        </div>
        <div class="col-2 align-self-center">
            <span>Data Memorize :</span>
        </div>
        <div class="col-4 mt-2">
            <input type="text" class="form-control">
        </div>
        <div class="col-1 mt-2">
            <button class="btn btn-soft-warning w-100">Edit</button>
        </div>
        <div class="col-4 mt-2">
            <input type="text" class="form-control" placeholder="Add new data">
        </div>
        <div class="col-1 mt-2">
            <button class="btn btn-soft-secondary text-nowrap w-100">+ Add</button>
        </div>

        <div class="row mt-2">
            <div class="col-6 text-center"><span>All Data</span></div>
            <div class="col-6 text-center"><span>Show Data</span></div>
        </div>
        <div class="row mt-2">
            <div class="col-6 border-cn  p-3">
                <input type="text" class="form-control bg-light border-0">
                <div class="height-componant">
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; Brief History
                    </div>
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; Pre-Diagnosis
                    </div>
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; Anesthesia
                    </div>
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; <span>Medication</span>
                    </div>
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; <span>Finding</span>
                    </div>
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; <span>Photo</span>
                    </div>
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; <span>Post-Diagnosis</span>
                    </div>
                    <div class="col-12 mt-2 text-delete">
                        <i class="ri-delete-bin-fill text-danger ri-lg" ></i>
                        &ensp; <span>Procedure</span>
                    </div>

                </div>


            </div>
            <div class="col-6 border-cn p-3">
                <input type="text" class="form-control bg-light border-0">
                <div class="col-12 mt-2 ">
                    &ensp; <span>Brief History</span>
                </div>
                <div class="col-12 mt-2 ">
                    &ensp; <span>Pre-Diagnosis</span>
                </div>
                <div class="col-12 mt-2 ">
                    &ensp; <span>Anesthesia</span>
                </div>
            </div>
        </div>
        <div class="col-12 text-end mt-3" style="padding-top: 29vh">
            <button type="button" class="btn btn-primary btn-label waves-effect right waves-light"><i class="ri-check-double-line label-icon align-middle fs-16 ms-2"></i> Confirm</button>

        </div>
    </div>
</div>
