<style>
    .main{
        font-size: 16px;
        line-height: 1.6rem;
    }
    .noteDateTime{
        display: flex;
    }
    .btList{
        width: 340px;
    }
    .operationTime{
        float: left;
    }
    .ot-body{
        float: left;
        width: 150px;
    }
    .sergion{
        margin-top: 200px;
    }
    .bottom{
        display: flex;
    }
    .bottom-left{
        height: 300px;
        width: 90px;
        margin-left: 350px;
        margin-bottom: 20px;
    }
    .btListRight{
        width: 370px;
    }
</style>
<div class="main">
    <div class="noteDateTime">
        <div class="btList">
            <div class="operationTime">Date</div>
            <span>: <span ng-if="dateAndTime.length>0">{{dateAndTime[0].value.split(" ")[0] }}</span></span>
        </div>
        <div class="btList">
            <div class="operationTime">Time</div>
            <span>: <span ng-if="dateAndTime.length>0">{{dateAndTime[0].value.split(" ")[1]}}</span> </span>
        </div>
        <div class="btListRight">
            <div class="operationTime">Operation Duration</div>
            <span>: <span ng-if="operationDuration.length>0">{{operationDuration[0].value}}</span></span>
        </div>
    </div>
    <div class="noteDateTime">
        <div class="operationTime">Bed/Cabin</div>
        <span>: <span >{{bedDetails.physicalLocationName}}, {{bedDetails.bedNumber}}</span></span>
    </div>
    <div class="">
        <div class="otList">
            <div class="ot-body">Indication</div>
            <span>: 
                <span ng-repeat="data in operationIndication"> {{data.value.shortName}} 
                    <!-- <span ng-if="operationIndication[0].comment">({{operationIndication[0].comment}})</span> -->
                    <span ng-if="data.value.name ==='Indication Others'">({{indicationNote[0].value}})</span>
                    {{$last ? '' : ', '}}
                </span>
            </span>
        </div>
    
        <div class="otList">
            <div class="ot-body">Name Of Operation</div>
            <span>: <span ng-if="nameOfOperation.length>0">{{nameOfOperation[0].value}} <span ng-if="nameOfOperation.length>0">{{nameOfOperation[0].value}}</span></span></span>
        </div>
        <div class="otList">
            <div class="ot-body">Aneasthesia:</div>
            <span>: <span ng-if="anesthesiaOfOperation.length>0">{{anesthesiaOfOperation[0].value.shortName}}<span ng-if="oTAnesthesiaNote.length>0"> ({{oTAnesthesiaNote[0].value}})</span><span ng-if="anesthesiaOfOperation[0].comment"> ({{oTAnesthesiaNote[0].comment}})</span></span></span>
        </div>
        <div class="otList">
            <div class="ot-body">Position Of Patient</div>
            <span>: <span ng-if="positionOfPatient.length>0">{{positionOfPatient[0].value}}</span></span>
        </div>
        <div class="otList">
            <div class="ot-body">Incision</div>
            <span>:<span ng-if="incision.length>0"> {{incision[0].value}}</span></span>
        </div>
        <div class="otList">
            <div class="ot-body">Procedure and finding</div>
            <span>: <span ng-if="procedureAndFindings.length>0">{{procedureAndFindings[0].value}}</span></span>
        </div>
    </div>
    <div>
        <div class="sergion">
            <p>Surgeon-  <span ng-if="nameOfSurgeons.length>0"><p style="white-space: pre-line" ng-bind-html="nameOfSurgeons[0].value"></p></span></p>
        </div>
        <div class="bottom">
            <div class="bottom-left"><p>Aneasthetist- </p></div>
            <div style="margin-top: 20px;">
                <p style="white-space: pre-line" ng-if="nameOfAnesthetist.length>0">{{nameOfAnesthetist[0].value}}</p>
            </div>
        </div>
    </div>
</div>