<div class="ccard h-100 d-flex flex-column px-2 py-3">
    <div class="d-flex text-center">
        <div class="flex-grow-1 mb-3">
            <div class="text-nowrap lh text-100 text-dark-l2">
                {{ header | translate }}&nbsp;<i class="fa fa-info-circle" matTooltip="{{ 'dashboards.operative.session.time.desc' | translate }}"></i>
            </div>


            <div class="lh">

                <span class="text-170 text-secondary-d4" style="font-size: 1.3em !important;">
                    {{ value?.value |  millisToDayHourMinuteSecond }}
                </span>
            </div>
        </div>
        <!-- <div class="session-icon">
            <i class="fa fa-2x fa-clock-o" matTooltip="{{ 'action.grid.refresh' | translate }}"></i>
        </div> -->
    </div>


    <div class="align-self-center">
        <xdf-peity #peti [values]="value?.history" [type]="'line'" theme="primary" [attributes]='options'></xdf-peity>
    </div>

</div>