{{! change the default tags to <% %> }}{{=<% %>=}}
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
        <style>
            {{# bundle.include_string }}reports/styles/sharedReportStyles.css{{/}}
        </style>
        <style>
            {{# bundle.include_string }}reports/styles/sharedClipFolderReportStyles.css{{/}}
        </style>
        <style>
            {{# bundle.include_string }}reports/styles/styles.css{{/}}
        </style>
    </head>
    <body>

        <div id="headTitle" class="hideprint">
            <div class="left">LiveGrade Pro Shot Report</div>
            <div class="right">{{ formatters.datetime.short(report.date) }}</div>
            <div class="center">{{report.product}}</div>
        </div>


        <div id="header">
            <div id="leftHeader">
                <div id="basicReportInfo">
                    <div id="folderSummaryLeft">
                        <img class="scale_to_container_height" src="{{# bundle.include_imagedata }}LiveGrade_AppIcon.icns{{/}}">
                    </div>
                    <div class="folderSummaryRight">
                        <div id="folderTitle">
                            {{project.name}}
                        </div>
                    </div>
                    <div class="folderSummaryRight subTitle">{{#localize}}Folder{{/localize}} {{folder.name}}</div>
                </div>
                <div id="dateSummary">
                    <div id="dateSummaryLeft">
                        <div class="folderSummaryRight subTitle">
                        </div>
                    </div>

                </div>
                <div id="rightHeader">
                    <div id="rightHeaderImageContainer">
                    </div>
                    <div id="productionName"></div>
                </div>
            </div>
        </div>
        <div class="optionalStatsBoxes breakable">
            <table class="clipTable optionalStatBoxTable firstRowLeftAligned">
                <tr class="clipTableHeading">
                    <th width="1%">{{#localize}}Thumbnail{{/localize}}</th>
                    <th>{{#localize}}Clip Identifier{{/localize}}</th>
                    <%#reportColumns%>
                        <th><%title%></th>
                    <%/reportColumns%>
                </tr>
                {{#grades}}
                    <tr class="clipTableRow">
                        <td width="1%">
                            <img class="thumbnail" src="{{ image.dataurl.jpeg(thumbnailImage) }}">
                        </td>
                        <td>{{masterOrSelf.clip.clipIdentifier}}{{#masterOrSelf.hasChildGrades}} [{{nameFromMasterWithCameraOrOneBasedIndexForChild}}]{{/masterOrSelf.hasChildGrades}}</td>
                        <%#reportColumns%>
                            <%#isString%>
                                <td>{{<%templateString%>}}</td>
                            <%/isString%>
                            <%#isImage%>
                                <td><img src="{{ image.dataurl.jpeg(<%templateString%>) }}"></td>
                            <%/isImage%>
                            <%#isIcon%>
                                <td><img src="{{ image.dataurl.png(<%templateString%>) }}"></td>
                            <%/isIcon%>
                            <%#isNodes%>
                                <td>
                                    {{#<%templateString%>}}
                                        <p>{{.string}}</p>
                                    {{/<%templateString%>}}
                                </td>
                            <%/isNodes%>
                        <%/reportColumns%>
                    </tr>
                {{/grades}}
            </table>
        </div>
    </body>
</html>
