{extends file="config.tpl"}

{block name="content"}
<form method="POST" action="{$modulelink}&amp;page=layout" autocomplete="off">
    <div class="row">
        <div class="col-md-12">
            <h2><i class="fas fa-file-alt"></i> Layout</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h4 class="mb-3">Page margins</h4>
            <div class="row">
                <div class="form-group col-md-4">
                    <label for="margin_top_1">Top margin p1</label>
                    <div class="input-group">
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="margin_top_1" value="{$config.margin_top_1}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="margin_top_2">Top margin p2+</label>
                    <div class="input-group">
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="margin_top_2" value="{$config.margin_top_2}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="margin_bottom_1">Bottom margin p1</label>
                    <div class="input-group">
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="margin_bottom_1" value="{$config.margin_bottom_1}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="margin_bottom_2">Bottom margin p2+</label>
                    <div class="input-group">
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="margin_bottom_2" value="{$config.margin_bottom_2}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="margin_left">Left margin</label>
                    <div class="input-group">
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="margin_left" value="{$config.margin_left}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="margin_right">Right margin</label>
                    <div class="input-group">
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="margin_right" value="{$config.margin_right}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group form-inline col-md-6">
                    <label for="fold_marks">Marks</label><br/>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="fold_marks" value="1"{if $config.fold_marks} checked{/if}>
                            Show paper fold marks
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h4 class="mb-3">Titles</h4>
            <div class="row">
                <div class="form-group col-md-4">
                    <label for="title_font_family">Font family</label>
                    <select name="title_font_family" class="form-control">
                        {foreach $fonts as $fontFile => $fontName}
                            <option value="{$fontFile}"{if $config.title_font_family eq $fontFile} selected{/if}>{$fontName}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group col-md-4">
                    <label for="title_font_style">Style</label>
                    <select class="form-control" name="title_font_style">
                        <option value=""{if $config.title_font_style eq ''} selected{/if}>Plain</option>
                        <option value="B"{if $config.title_font_style eq 'B'} selected{/if}>Bold</option>
                        <option value="I"{if $config.title_font_style eq 'I'} selected{/if}>Italic</option>
                        <option value="U"{if $config.title_font_style eq 'U'} selected{/if}>Underline</option>
                    </select>
                </div>
                <div class="form-group col-md-4">
                    <label for="title_font_size">Size</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="title_font_size" value="{$config.title_font_size}" required>
                        <span class="input-group-addon">pt</span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="title_font_color">Color</label>
                    <input type="color" class="form-control" name="title_font_color" value="{$config.title_font_color}">
                </div>
                <div class="form-group col-md-4">
                    <label for="title_margin_top">Top margin</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="title_margin_top" value="{$config.title_margin_top}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="title_margin_bottom">Bottom margin</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="title_margin_bottom" value="{$config.title_margin_bottom}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <hr class="mb-4">
            <h4 class="mb-3">Tables</h4>
            <div class="row">
                <div class="form-group col-md-2">
                    <label for="table_cell_spacing">Cell spacing</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="table_cell_spacing" value="{$config.table_cell_spacing}" required>
                        <span class="input-group-addon">px</span>
                    </div>
                </div>
                <div class="form-group col-md-2">
                    <label for="table_cell_padding">Cell padding</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="table_cell_padding" value="{$config.table_cell_padding}" required>
                        <span class="input-group-addon">px</span>
                    </div>
                </div>
                <div class="form-group col-md-2">
                    <label for="table_column_align">Text</label>
                    <select class="form-control" name="table_column_align">
                        <option value="left"{if $config.table_column_align eq 'left'} selected{/if}>Align left</option>
                        <option value="center"{if $config.table_column_align eq 'center'} selected{/if}>Align center</option>
                        <option value="right"{if $config.table_column_align eq 'right'} selected{/if}>Align right</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="table_amount_align">Numeric</label>
                    <select class="form-control" name="table_amount_align">
                        <option value="left"{if $config.table_amount_align eq 'left'} selected{/if}>Align left</option>
                        <option value="center"{if $config.table_amount_align eq 'center'} selected{/if}>Align center</option>
                        <option value="right"{if $config.table_amount_align eq 'right'} selected{/if}>Align right</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="table_background_transparent">White backgrounds</label>
                    <select class="form-control" name="table_background_transparent">
                        <option value="white"{if $config.table_background_transparent eq 'white'} selected{/if}>White</option>
                        <option value="transparent"{if $config.table_background_transparent eq 'transparent'} selected{/if}>Transparent</option>
                    </select>
                </div>
            </div>
            <hr class="mb-4">
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h4 class="mb-3">Table headers</h4>
            <div class="row">
                <div class="form-group form-inline col-md-6">
                    <label for="table_header_border_top">Border</label><br/>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_header_border_top" value="1"{if $config.table_header_border_top} checked{/if}>
                            Top
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_header_border_right" value="1"{if $config.table_header_border_right} checked{/if}>
                            Right
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_header_border_bottom" value="1"{if $config.table_header_border_bottom} checked{/if}>
                            Bottom
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_header_border_left" value="1"{if $config.table_header_border_left} checked{/if}>
                            Left
                        </label>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_header_border_thickness">thickness</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="table_header_border_thickness" value="{$config.table_header_border_thickness}" required>
                        <span class="input-group-addon">px</span>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_header_border_color">color</label>
                    <input type="color" class="form-control" name="table_header_border_color" value="{$config.table_header_border_color}">
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="table_header_font_family">Font family</label>
                    <select name="table_header_font_family" class="form-control">
                        {foreach $fonts as $fontFile => $fontName}
                            <option value="{$fontFile}"{if $config.table_header_font_family eq $fontFile} selected{/if}>{$fontName}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_header_font_style">Style</label>
                    <select class="form-control" name="table_header_font_style">
                        <option value=""{if $config.table_header_font_style eq ''} selected{/if}>Plain</option>
                        <option value="B"{if $config.table_header_font_style eq 'B'} selected{/if}>Bold</option>
                        <option value="I"{if $config.table_header_font_style eq 'I'} selected{/if}>Italic</option>
                        <option value="U"{if $config.table_header_font_style eq 'U'} selected{/if}>Underline</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_header_font_size">Size</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="table_header_font_size" value="{$config.table_header_font_size}" required>
                        <span class="input-group-addon">pt</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-3">
                    <label for="table_header_draw">Color</label>
                    <input type="color" class="form-control" name="table_header_draw" value="{$config.table_header_draw}">
                </div>
                <div class="form-group col-md-3">
                    <label for="table_header_fill">Background</label>
                    <input type="color" class="form-control" name="table_header_fill" value="{$config.table_header_fill}">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h4 class="mb-3">Table bodies</h4>
            <div class="row">
                <div class="form-group form-inline col-md-6">
                    <label for="table_body_border_top">Border</label><br/>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_body_border_top" value="1"{if $config.table_body_border_top} checked{/if}>
                            Top
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_body_border_right" value="1"{if $config.table_body_border_right} checked{/if}>
                            Right
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_body_border_bottom" value="1"{if $config.table_body_border_bottom} checked{/if}>
                            Bottom
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_body_border_left" value="1"{if $config.table_body_border_left} checked{/if}>
                            Left
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="table_body_border_last" value="1"{if $config.table_body_border_last} checked{/if}>
                            Header bottom border after last item
                        </label>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_body_border_thickness">thickness</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="table_body_border_thickness" value="{$config.table_body_border_thickness}" required>
                        <span class="input-group-addon">px</span>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_body_border_color">color</label>
                    <input type="color" class="form-control" name="table_body_border_color" value="{$config.table_body_border_color}">
                </div>

            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="table_body_font_family">Font family</label>
                    <select name="table_body_font_family" class="form-control">
                        {foreach $fonts as $fontFile => $fontName}
                            <option value="{$fontFile}"{if $config.table_body_font_family eq $fontFile} selected{/if}>{$fontName}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_body_font_style">Style</label>
                    <select class="form-control" name="table_body_font_style">
                        <option value=""{if $config.table_body_font_style eq ''} selected{/if}>Plain</option>
                        <option value="B"{if $config.table_body_font_style eq 'B'} selected{/if}>Bold</option>
                        <option value="I"{if $config.table_body_font_style eq 'I'} selected{/if}>Italic</option>
                        <option value="U"{if $config.table_body_font_style eq 'U'} selected{/if}>Underline</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="table_body_font_size">Size</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="table_body_font_size" value="{$config.table_body_font_size}" required>
                        <span class="input-group-addon">pt</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-3">
                    <label for="table_body_draw">Color</label>
                    <input type="color" class="form-control" name="table_body_draw" value="{$config.table_body_draw}">
                </div>
                <div class="form-group col-md-3">
                    <label for="table_body_fill">Background</label>
                    <input type="color" class="form-control" name="table_body_fill" value="{$config.table_body_fill}">
                </div>
                <div class="form-group col-md-3">
                    <label for="table_body_draw_2">Alt. color</label>
                    <input type="color" class="form-control" name="table_body_draw_2" value="{$config.table_body_draw_2}">
                </div>
                <div class="form-group col-md-3">
                    <label for="table_body_fill_2">Alt. background</label>
                    <input type="color" class="form-control" name="table_body_fill_2" value="{$config.table_body_fill_2}">
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <hr class="mb-4">
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h4 class="mb-3">Table summaries</h4>
            <div class="row">
                <div class="form-group form-inline col-md-6">
                    <label for="summary_items_border_top">Border</label><br/>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="summary_items_border_top" value="1"{if $config.summary_items_border_top} checked{/if}>
                            Top
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="summary_items_border_right" value="1"{if $config.summary_items_border_right} checked{/if}>
                            Right
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="summary_items_border_bottom" value="1"{if $config.summary_items_border_bottom} checked{/if}>
                            Bottom
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="summary_items_border_left" value="1"{if $config.summary_items_border_left} checked{/if}>
                            Left
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="summary_items_border_last" value="1"{if $config.summary_items_border_last} checked{/if}>
                            Header bottom border before last item
                        </label>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_items_border_thickness">thickness</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="summary_items_border_thickness" value="{$config.summary_items_border_thickness}" required>
                        <span class="input-group-addon">px</span>
                    </div>
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_items_border_color">color</label>
                    <input type="color" class="form-control" name="summary_items_border_color" value="{$config.summary_items_border_color}">
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="summary_items_font_family">Font family</label>
                    <select name="summary_items_font_family" class="form-control">
                        {foreach $fonts as $fontFile => $fontName}
                            <option value="{$fontFile}"{if $config.summary_items_font_family eq $fontFile} selected{/if}>{$fontName}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_items_font_style">Style</label>
                    <select class="form-control" name="summary_items_font_style">
                        <option value=""{if $config.summary_items_font_style eq ''} selected{/if}>Plain</option>
                        <option value="B"{if $config.summary_items_font_style eq 'B'} selected{/if}>Bold</option>
                        <option value="I"{if $config.summary_items_font_style eq 'I'} selected{/if}>Italic</option>
                        <option value="U"{if $config.summary_items_font_style eq 'U'} selected{/if}>Underline</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_items_font_size">Size</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="summary_items_font_size" value="{$config.summary_items_font_size}" required>
                        <span class="input-group-addon">pt</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-3">
                    <label for="summary_items_draw">Color</label>
                    <input type="color" class="form-control" name="summary_items_draw" value="{$config.summary_items_draw}">
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_items_fill">Background</label>
                    <input type="color" class="form-control" name="summary_items_fill" value="{$config.summary_items_fill}">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h4 class="mb-3">Table summary last line</h4>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="summary_total_font_family">Font family</label>
                    <select name="summary_total_font_family" class="form-control">
                        {foreach $fonts as $fontFile => $fontName}
                            <option value="{$fontFile}"{if $config.summary_total_font_family eq $fontFile} selected{/if}>{$fontName}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_total_font_style">Style</label>
                    <select class="form-control" name="summary_total_font_style">
                        <option value=""{if $config.summary_total_font_style eq ''} selected{/if}>Plain</option>
                        <option value="B"{if $config.summary_total_font_style eq 'B'} selected{/if}>Bold</option>
                        <option value="I"{if $config.summary_total_font_style eq 'I'} selected{/if}>Italic</option>
                        <option value="U"{if $config.summary_total_font_style eq 'U'} selected{/if}>Underline</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_total_font_size">Size</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="summary_total_font_size" value="{$config.summary_total_font_size}" required>
                        <span class="input-group-addon">pt</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-3">
                    <label for="summary_total_draw">Color</label>
                    <input type="color" class="form-control" name="summary_total_draw" value="{$config.summary_total_draw}">
                </div>
                <div class="form-group col-md-3">
                    <label for="summary_total_fill">Background</label>
                    <input type="color" class="form-control" name="summary_total_fill" value="{$config.summary_total_fill}">
                </div>
                <div class="form-group col-md-6">
                    <label for="summary_total_spacing">Spacing</label>
                    <select class="form-control" name="summary_total_spacing">
                        <option value="normal"{if $config.summary_total_spacing eq 'normal'} selected{/if}>Normal</option>
                        <option value="extra"{if $config.summary_total_spacing eq 'extra'} selected{/if}>Preceed with empty line</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <hr class="mb-4">
        </div>
    </div>

    <div class="btn-group" role="group" aria-label="...">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
    </div>

</form>
{/block}
