<div ng-controller="Umbraco.Editors.Macros.SettingsController">
    <umb-box>
        <umb-box-header title="Info"></umb-box-header>
        <umb-box-content>
            <umb-control-group label="Id">
                {{model.macro.id}}<br/>
                {{model.macro.key}}
            </umb-control-group>
        </umb-box-content>
    </umb-box>
    <umb-box>
        <umb-box-header title="Macro partial view"></umb-box-header>
        <umb-box-content>
            <umb-control-group label="Macro partial view">

                <umb-node-preview ng-if="model.macro.node"
                                  icon="model.macro.node.icon"
                                  name="model.macro.node.name"
                                  allow-edit="true"
                                  allow-remove="true"
                                  on-edit="model.openViewPicker()"
                                  on-remove="model.removeMacroView()">
                </umb-node-preview>

                <a href=""
                   ng-show="!model.macro.node"
                   class="umb-node-preview-add"
                   ng-click="model.openViewPicker()"
                   prevent-default>
                    <localize key="general_add">Add</localize>
                </a>

            </umb-control-group>
        </umb-box-content>
    </umb-box>
    <umb-box>
        <umb-box-header title="Editor settings"></umb-box-header>
        <umb-box-content>
            <umb-control-group label="Use in rich text editor and the grid">
                <umb-toggle checked="model.macro.useInEditor" on-click="model.toggle('useInEditor')" ></umb-toggle>
            </umb-control-group>
            <umb-control-group label="Render in rich text editor and the grid" ng-if="model.macro.useInEditor">
                <umb-toggle checked="model.macro.renderInEditor && model.macro.useInEditor"  on-click="model.toggle('renderInEditor')" ></umb-toggle>
            </umb-control-group>
        </umb-box-content>
    </umb-box>
    <umb-box>
        <umb-box-header title="Cache settings"></umb-box-header>
        <umb-box-content>
            <umb-control-group label="Cache period">
               <input type="number" min="0" ng-model="model.macro.cachePeriod"/>
            </umb-control-group>
            <umb-control-group label="Cache by page">
                <umb-toggle checked="model.macro.cacheByPage" on-click="model.toggle('cacheByPage')"></umb-toggle>
            </umb-control-group>
            <umb-control-group label="Cache personalized">
                <umb-toggle checked="model.macro.cacheByUser" on-click="model.toggle('cacheByUser')"></umb-toggle>
            </umb-control-group>
        </umb-box-content>
    </umb-box>
</div>
