<template>
<t t-name="DashBoard">
    <div class="oe-dashboard-links">
        <button type="button" class="button oe-dashboard-link-reset" t-att-style="view.fields_view.custom_view_id ? null : 'display: none'">
            <img src="/web/static/src/img/icons/STOCK_GOTO_FIRST.png" width="16" height="16"/>
            <span>Reset</span>
        </button>
        <button type="button" class="button oe-dashboard-link-undo" t-att-style="view.fields_view.custom_view_id ? null : 'display: none'">
            <img src="/web/static/src/img/icons/gtk-undo.png" width="16" height="16"/>
            <span>Undo</span>
        </button>
        <button type="button" class="button oe-dashboard-link-add_widget">
            <img src="/web/static/src/img/icons/STOCK_ADD.png" width="16" height="16"/>
            <span>Add Widget</span>
        </button>
        <button type="button" class="button oe-dashboard-link-change_layout">
            <img src="/web/static/src/img/icons/gtk-edit.png" width="16" height="16"/>
            <span>Change layout</span>
        </button>
    </div>
    <table t-att-data-layout="node.attrs.style" t-attf-class="oe-dashboard oe-dashboard-layout_#{node.attrs.style}" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td t-foreach="node.children" t-as="column" t-if="column.tag == 'column'"
             t-att-id="view.element_id + '_column_' + column_index" t-attf-class="oe-dashboard-column index_#{column_index}">

            <t t-foreach="column.children" t-as="action" t-if="action.tag == 'action'" t-call="DashBoard.action"/>
        </td>
    </tr>
    </table>
</t>
<t t-name="DashBoard.action">
    <div t-att-data-id="action.attrs.name" class="oe-dashboard-action">
        <h2 class="oe-dashboard-action-header oe_view_title">
            <t t-esc="action.attrs.string"/>
            <!--<a href="#" class="oe-dashboard-action-rename"><img src="/web/static/src/img/icons/gtk-edit.png" width="16" height="16"/></a>-->
            <input class="oe-dashboard-action-input" type="text" name="title" value="" style="display: none"/>
            <span class='ui-icon ui-icon-closethick'></span>
            <span class='ui-icon ui-icon-minusthick oe-dashboard-fold' t-if="!action.attrs.fold"></span>
            <span class='ui-icon ui-icon-plusthick oe-dashboard-fold' t-if="action.attrs.fold"></span>
        </h2>
        <div t-att-id="view.element_id + '_action_' + action.attrs.name" class="oe-dashboard-action-content" t-att-style="action.attrs.fold ? 'display: none' : null"></div>
    </div>
</t>
<t t-name="DashBoard.layouts">
    <div class="oe-dashboard-layout-selector">
        <p>
            <strong>Choose dashboard layout</strong>
        </p>
        <ul>
            <li t-foreach="'1 1-1 1-1-1 1-2 2-1'.split(' ')" t-as="layout" t-att-data-layout="layout">
                <img t-attf-src="/web_dashboard/static/src/img/layout_#{layout}.png"/>
                <img t-if="layout == current_layout"
                    src="/web/static/src/img/icons/gtk-apply.png" width="16" height="16" class="oe-selected-layout"/>
            </li>
        </ul>
    </div>
</t>
<t t-name="DashBoard.xml">
    <form t-att-string="form_title">
        <board t-att-style="style">
            <column t-foreach="columns" t-as="column">
                <action t-foreach="column" t-as="action" t-att="action"/>
            </column>
        </board>
    </form>
</t>
<div t-name="ConfigOverview" class="oe-dashboard-config-overview"/>
<t t-name="ConfigOverview.content">
    <div class="oe-config-progress">
        <h6 class="oe-config-progress-title">
            progress: <t t-esc="Math.round(completion)"/>%
        </h6>
        <div class="oe-config-progress-bar" t-att-data-completion="completion"/>
    </div>
    <dl>
        <t t-foreach="groups" t-as="category">
            <dt><t t-esc="category"/></dt>
            <dd><ul>
                <li t-foreach="category_value" t-as="todo"
                    t-att-class="todo.done ? 'oe-done' : undefined"
                    t-att-data-id="todo.id"
                    t-att-title="!todo.done ? 'Execute task \'' + todo.name + '\'' : undefined">
                    <input type="checkbox" t-att-value="todo.id"
                       t-att-title="!todo.done ? 'Mark this task as done' : undefined"
                       t-att-checked="todo.done ? 'checked' : undefined"/>
                    <t t-esc="todo.name"/>
                </li>
            </ul></dd>
        </t>

    </dl>
</t>
<div t-name="ApplicationTiles" class="oe-dashboard-home-tiles"/>
<table t-name="ApplicationTiles.content" width="100%">
    <tr t-foreach="rows" t-as="row">
        <td t-foreach="row" t-as="application" width="33.3%">
            <div class="oe-dashboard-home-tile"
                 t-att-data-menuid="application.id">
                <div class="oe-dashboard-home-tile-icon">
                    <img t-if="application.web_icon_data"
                        t-att-src="'data:image/png;base64,' + application.web_icon_data"
                    /><img t-if="application.web_icon_hover_data" class="hover"
                        t-att-src="'data:image/png;base64,' + application.web_icon_hover_data"/>
                </div>
                <span><t t-esc="application.name"/></span>
            </div>
        </td>
    </tr>
</table>
<div t-name="HomeWidget" class="oe-dashboard-home-widget"/>
<t t-name="HomeWidget.content">
    <h3><t t-esc="widget.title"/></h3>
    <iframe width="100%" frameborder="0" t-att-src="url"/>
</t>
</template>
