<div class="md-padding" layout="column">
    <div layout="row" flex>
        <md-card flex>
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">{{ "rffwhid.logging.FLIGHT_LOG_TITLE" | translate }}</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-content>
                <div class="row">
                    <div>
                        <md-progress-linear md-mode="determinate" class="md-hue-1" value="{{ RFDump.fl.size*100/RFDump.fl.total || 0 }}"></md-progress-linear>
                        <md-tooltip>
                            {{ "rffwhid.logging.CURRENT_SIZE_TOOLTIP" | translate:'{ flight_log_size: RFDump.fl.size > 0 ? (RFDump.fl.size|bytes) : 0 }' }}
                        </md-tooltip>
                    </div>
                    <div layout="row" layout-align="end center" layout-wrap>
                        <div layout="row" layout-align="start center" flex>
                            <p class="md-caption" layout-align="start center">0 MB</p>
                            <span flex></span>
                        </div>
                        <p class="md-caption">{{ RFDump.fl.total|bytes }}</p>
                    </div>
                </div>
            </md-card-content>
            <md-card-actions layout="row" layout-align="end center">
                <md-button class="md-warn" ng-click="formatFlash()">{{ "rffwhid.logging.FORMAT_FLASH_BUTTON" | translate }}</md-button>
                <md-button class="md-warn" ng-click="eraseFlash()">{{ "rffwhid.logging.ERASE_FLASH_BUTTON" | translate }}</md-button>
                <md-button class="md-raised md-primary" ng-click="downloadFlightLog()">{{ "rffwhid.logging.DOWNLOAD_FLIGHT_LOG_BUTTON" | translate }}</md-button>
            </md-card-actions>
        </md-card>
    </div>

    <!--<div layout="row">-->
        <!--<md-button class="md-warn" ng-click="loadLogFile()">Open log file</md-button>-->
    <!--</div>-->
</div>