reports.html

<script type="text/ng-template" id="reports">
    <p>Download even outside UOS!</p>
</script>

<div layout="column" flex>
    <div layout="row" layout-xs="column" ng-repeat="row in ::reports" flex="50">
        <md-card ng-repeat="(type, report) in ::row" flex>
            <md-button layout="column" layout-align="center" style="text-transform: none" target="_blank"
                href="/api/reports/{{ ::type.toLowerCase().replace(' ', '_') }}/{{ $media('xs') ? 'html/' : '' }}" flex>
                <div md-colors="::{color: 'blue-grey-700'}" layout="column" layout-xs="row">
                    <md-icon md-font-icon="fa fa-{{ ::report.icon }} fa-fw fa-5x"
                        style="line-height: 1em; height: 72px; width: 1.2em"
                        md-colors="::{color: 'blue-grey-700'}"></md-icon>
                    <div flex-xs>
                        <h2>{{ ::type }}</h2>
                        <div hide-xs>{{ ::report.desc }}</div>
                    </div>
                </div>
            </md-button>
        </md-card>
    </div>
</div>