<div class="dialog-container">
    <div ng-show="!!log" class="blocker justify-center items-center">
        <div class="d-flex">
            <div class="modal-dialog card ng-cloak log-details-modal">
                <div class="info">
                    <div class="title d-flex">
                        <h3>{{modalTitle}}</h3>
                        <h3 class="mr-2 ml-2">-</h3>
                        <h3>{{ log.Result ? log.Result.MainOperation : log.Type | translate }}</h3>
                        <h3 ng-show="modalType !== 'remoteDetails'" class="mr-2 ml-2">-</h3>
                        <h3>{{ headerDate }}</h3>
                    </div>
                    <div class="content">
                        <div class="mb-2">
                            <div ng-repeat="section in sectionsData track by $index" class="mb-4">
                                <h3>{{section.groupTitle}}</h3>
                                <div class="d-flex mt-3" style="gap: 30px">
                                    <div ng-repeat="item in section.data track by $index">
                                        <h4>{{item.title}}</h4>
                                        <span>{{item.value}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3 translate>Summary</h3>
                            <div class="log-details-expandable mt-3">
                                <div ng-repeat="item in summaryData track by $index">
                                    <a
                                            href
                                            class="task-title d-flex items-center space-between pd-3"
                                            ng-click="item.isOpened = !item.isOpened"
                                    >
                                        <div class="d-flex items-center">
                                            <div
                                                    ng-if="modalType === 'generalDetails'"
                                                    style="border: none"
                                                    class="mr-2 backup-status backup-status-{{ item.status }}"
                                            ></div>
                                            <h4>{{item.title}}</h4>
                                        </div>
                                        <div class="expand-icon d-flex items-center">
                                            <i class="ic-chevron-{{ item.isOpened ? 'up' : 'down'}}"></i>
                                        </div>
                                    </a>
                                    <div class="expandable" ng-class="{expand: item.isOpened, 'last-element': $last}">
                                        <div class="inner" ng-bind-html="item.data | jsonPretty">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="actions-container" style="padding-top: 20px">
                        <button
                                class="ekup-button"
                                ng-click="CloseModal()"
                                translate
                        >
                            Finish
                        </button>
                    </div>
                </div>
            </div>
            <div>
                <div class="modal-dialog-close-btn card ml-3 cursor-pointer" ng-click="CloseModal()">
                    <i class="ic-x"></i>
                </div>
            </div>
        </div>
    </div>
</div>