{extends file="config.tpl"}

{block name="content"}
<form method="POST" action="{$modulelink}&amp;page=appearance" enctype='multipart/form-data' autocomplete="off">
    <div class="row">
        <div class="col-md-12">
            <h2><i class="fas fa-images"></i> Appearance</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h4 class="mb-3">Logos</h4>
            <div class="row">
                <div class="form-group col-md-12">
                    <div class="thumbnail">
                        {if $config.logo_file_1}
                            <img src="{$modulelink}&amp;page=logo&amp;file={$config.logo_file_1}" style="max-height:150px;"/>
                        {/if}
                        <div class="caption">
                            <h5>First page{if $config.logo_file_1} <small><a href="{$modulelink}&amp;page=appearance&amp;dellogo=1"><i class="fas fa-trash-alt" title="Delete"></i></a></small>{/if}</h5>
                            <input type="file" class="form-control" name="logo_file_1"/>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="logo_position_1_x">Position</label>
                        <div class="input-group">
                            <span class="input-group-addon">X</span>
                            <input type="number" pattern="\d+" class="form-control" name="logo_position_1_x" value="{$config.logo_position_1_x}" required>
                            <span class="input-group-addon">mm</span>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="logo_position_1_y">&nbsp;</label>
                        <div class="input-group">
                            <span class="input-group-addon">Y</span>
                            <input type="number" pattern="\d+" class="form-control" name="logo_position_1_y" value="{$config.logo_position_1_y}" required>
                            <span class="input-group-addon">mm</span>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="logo_width_1">Width</label>
                        <div class="input-group">
                            <input type="number" pattern="\d+" class="form-control" name="logo_width_1" value="{$config.logo_width_1}" required>
                            <span class="input-group-addon">mm</span>
                        </div>
                    </div>
                </div>
                <div class="form-group col-md-12">
                    <div class="thumbnail">
                        {if $config.logo_file_2}
                            <img src="{$modulelink}&amp;page=logo&amp;file={$config.logo_file_2}" style="max-height:150px;"/>
                        {/if}
                        <div class="caption">
                            <h5>Following pages{if $config.logo_file_2} <small><a href="{$modulelink}&amp;page=appearance&amp;dellogo=2"><i class="fas fa-trash-alt" title="Delete"></i></a></small>{/if}</h5>
                            <input type="file" class="form-control" name="logo_file_2"/>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="logo_position_2_x">Position</label>
                        <div class="input-group">
                            <span class="input-group-addon">X</span>
                            <input type="number" pattern="\d+" class="form-control" name="logo_position_2_x" value="{$config.logo_position_2_x}" required>
                            <span class="input-group-addon">mm</span>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="logo_position_2_y">&nbsp;</label>
                        <div class="input-group">
                            <span class="input-group-addon">Y</span>
                            <input type="number" pattern="\d+" class="form-control" name="logo_position_2_y" value="{$config.logo_position_2_y}" required>
                            <span class="input-group-addon">mm</span>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="logo_width_2">Width</label>
                        <div class="input-group">
                            <input type="number" pattern="\d+" class="form-control" name="logo_width_2" value="{$config.logo_width_2}" required>
                            <span class="input-group-addon">mm</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h4 class="mb-3">PDF templates</h4>
            <div class="row">
                {foreach $templates as $template}
                    <div class="col-sm-6 col-md-6">
                        <div class="thumbnail">
                            <a href="{$modulelink}&amp;page=preview-template&amp;locale={$template}" target="_blank">
                                <img src="{$modulelink}&amp;page=thumb&amp;template={$template}&amp;thumb=1" style="border: 1px solid #eee;">
                            </a>
                            <div class="caption">
                                <h5>{$langs[$template]} <small><a href="{$modulelink}&amp;page=appearance&amp;deltpl={$template}"><i class="fas fa-trash-alt" title="Delete"></i></a></small></h5>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="template_default" value="{$template}"{if $config.template_default eq $template} checked{/if}>
                                        Default fallback
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                {/foreach}
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="thumbnail">
                        <div class="caption">
                            <div class="form-group col-md-8">
                                <label for="template_upload">Upload template</label>
                                <input type="file" class="form-control" name="template_upload"/>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="template_language">for language</label>
                                <select class="form-control" name="template_language">
                                    {foreach $langs as $locale => $lang}
                                        <option value="{$locale}"{if $lang eq 'English'} selected{/if}>{$lang}</option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </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>

<script>
    $(document).ready(function(){
        $('input[name=thumb_mode]').change(function() {
            switch(this.value) {
                case 'imagick':
                case 'magick':
                    $('input[name=thumb_bin]').val('convert');
                    break;
                case 'poppler':
                    $('input[name=thumb_bin]').val('pdftoppm');
                    break;
                default:
                    $('input[name=thumb_bin]').val('');
                    break;
            }
        });
    });
</script>
{/block}
