{extends file="config.tpl"}

{block name="content"}
<form method="POST" action="{$modulelink}&amp;page=status" autocomplete="off">
    <div class="row">
        <div class="col-md-12">
            <h2><i class="fas fa-file-invoice"></i> Invoice status</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <div class="row">
                <div class="form-group col-md-12">
                    <div class="radio">
                        <label>
                            <input type="radio" name="status_show" value="first"{if $config.status_show eq 'first'} checked{/if}>
                            Show on first page
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="status_show" value="all"{if $config.status_show eq 'all'} checked{/if}>
                            Show on all pages
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="status_show" value="never"{if $config.status_show eq 'never'} checked{/if}>
                            Never show
                        </label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="status_font_family">Font family</label>
                    <select name="status_font_family" class="form-control">
                        {foreach $fonts as $fontFile => $fontName}
                            <option value="{$fontFile}"{if $config.status_font_family eq $fontFile} selected{/if}>{$fontName}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="status_font_style">Style</label>
                    <select class="form-control" name="status_font_style">
                        <option value=""{if $config.status_font_style eq ''} selected{/if}>Plain</option>
                        <option value="B"{if $config.status_font_style eq 'B'} selected{/if}>Bold</option>
                        <option value="I"{if $config.status_font_style eq 'I'} selected{/if}>Italic</option>
                        <option value="U"{if $config.status_font_style eq 'U'} selected{/if}>Underline</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="status_font_size">Size</label>
                    <div class="input-group">
                        <input type="number" pattern="\d+" class="form-control" name="status_font_size" value="{$config.status_font_size}" required>
                        <span class="input-group-addon">pt</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="status_font_align">Align</label>
                    <select class="form-control" name="status_font_align">
                        <option value="L"{if $config.status_font_align eq 'L'} selected{/if}>Left</option>
                        <option value="C"{if $config.status_font_align eq 'C'} selected{/if}>Center</option>
                        <option value="R"{if $config.status_font_align eq 'R'} selected{/if}>Right</option>
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label for="status_font_caps">Caps</label>
                    <select class="form-control" name="status_font_caps">
                        <option value="normal"{if $config.status_font_caps eq 'normal'} selected{/if}>Normal</option>
                        <option value="upper"{if $config.status_font_caps eq 'upper'} selected{/if}>Uppercase</option>
                        <option value="lower"{if $config.status_font_caps eq 'lower'} selected{/if}>Lowercase</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="status_position_1_x">Position pg. 1</label>
                    <div class="input-group">
                        <span class="input-group-addon">X</span>
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="status_position_1_x" value="{$config.status_position_1_x}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="status_position_1_y">&nbsp;</label>
                    <div class="input-group">
                        <span class="input-group-addon">Y</span>
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="status_position_1_y" value="{$config.status_position_1_y}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="status_position_2_x">Position pg. 2+</label>
                    <div class="input-group">
                        <span class="input-group-addon">X</span>
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="status_position_2_x" value="{$config.status_position_2_x}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label for="status_position_2_y">&nbsp;</label>
                    <div class="input-group">
                        <span class="input-group-addon">Y</span>
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="status_position_2_y" value="{$config.status_position_2_y}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-6">
                    <label for="status_width">Width</label>
                    <div class="input-group">
                        <span class="input-group-addon">X</span>
                        <input type="number" step="0.1" pattern="\d+" class="form-control" name="status_width" value="{$config.status_width}" required>
                        <span class="input-group-addon">mm</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <h4 class="mb-3">Colors</h4>
            <table class="table">
                <tr>
                    <th width="33%"></th>
                    <th width="33%">Color</th>
                    <th width="33%">Background</th>
                </tr>
                <tr>
                    <th><label for="status_draft_color_draw">Draft</label></th>
                    <td><input type="color" class="form-control" name="status_draft_color_draw" value="{$config.status_draft_color_draw}"></td>
                    <td><input type="color" class="form-control" name="status_draft_color_fill" value="{$config.status_draft_color_fill}"></td>
                </tr>
                <tr>
                    <th><label for="status_default_color_draw">Unpaid</label></th>
                    <td><input type="color" class="form-control" name="status_default_color_draw" value="{$config.status_default_color_draw}"></td>
                    <td><input type="color" class="form-control" name="status_default_color_fill" value="{$config.status_default_color_fill}"></td>
                </tr>
                <tr>
                    <th><label for="status_overdue_color_draw">Overdue</label></th>
                    <td><input type="color" class="form-control" name="status_overdue_color_draw" value="{$config.status_overdue_color_draw}"></td>
                    <td><input type="color" class="form-control" name="status_overdue_color_fill" value="{$config.status_overdue_color_fill}"></td>
                </tr>
                <tr>
                    <th><label for="status_paid_color_draw">Paid</label></th>
                    <td><input type="color" class="form-control" name="status_paid_color_draw" value="{$config.status_paid_color_draw}"></td>
                    <td><input type="color" class="form-control" name="status_paid_color_fill" value="{$config.status_paid_color_fill}"></td>
                </tr>
                <tr>
                    <th><label for="status_refunded_color_draw">Refunded</label></th>
                    <td><input type="color" class="form-control" name="status_refunded_color_draw" value="{$config.status_refunded_color_draw}"></td>
                    <td><input type="color" class="form-control" name="status_refunded_color_fill" value="{$config.status_refunded_color_fill}"></td>
                </tr>
                <tr>
                    <th><label for="status_collections_color_draw">Collections</label></th>
                    <td><input type="color" class="form-control" name="status_collections_color_draw" value="{$config.status_collections_color_draw}"></td>
                    <td><input type="color" class="form-control" name="status_collections_color_fill" value="{$config.status_collections_color_fill}"></td>
                </tr>
                <tr>
                    <th><label for="status_cancelled_color_draw">Cancelled</label></th>
                    <td><input type="color" class="form-control" name="status_cancelled_color_draw" value="{$config.status_cancelled_color_draw}"></td>
                    <td><input type="color" class="form-control" name="status_cancelled_color_fill" value="{$config.status_cancelled_color_fill}"></td>
                </tr>
            </table>
        </div>
        <div class="col-md-12">
            <hr class="mb-4">
        </div>
    </div>

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

</form>
{/block}
