{% extends "admin/partial/layout_logged_in.html.twig" %}

{% block title %}{{ ta('add_new_user', 'Add New User') }}{% endblock %}
{% block selected_page %}users{% endblock %}
{% block selected_sub_page %}user_add{% endblock %}

{% block body %}
    <script>
        $(function () {
            $('#expiry_date').daterangepicker({
                singleDatePicker: true,
                calender_style: "picker_1",
                autoUpdateInput: false,
                locale: {
                    format: 'DD/MM/YYYY'
                }
            }, function (chosen_date) {
                $('#expiry_date').val(chosen_date.format('DD/MM/YYYY'));
            });
        });

        function checkExpiryDate()
        {
            userType = $('#account_type option:selected').val();
            if (userType > 1)
            {
                // default to 1 year
                $('#expiry_date').val('{{ defaultExpiryDate }}');
            }
        }
    </script>

    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>{{ ta('user_details', 'User Details') }}</h3>
                </div>
            </div>
            <div class="clearfix"></div>

            {{ msg_page_notifications|raw }}

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <form action="user_add" method="POST" class="form-horizontal form-label-left">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('login_details', 'Login Details') }}</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('enter_the_details_that_the_user_will_use_to_access_the_site', 'Enter the details that the user will use to access the site.') }}</p>
                                <br/>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="username">{{ ta('username', 'Username') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input id="username" name="username" class="form-control" required="required" type="text" value="{{ username }}"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="password">{{ ta('password', 'Password') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input id="password" name="password" class="form-control" required="required" type="password" value="{{ password }}"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="confirm_password">{{ ta('confirm_password', 'Confirm Password') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input id="confirm_password" name="confirm_password" class="form-control" required="required" type="password" value="{{ confirm_password }}"/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('account_details', 'Account Details') }}</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('information_about_the_account', 'Information about the account.') }}</p>
                                <br/>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="account_status">{{ ta('account_status', 'Account Status') }}:
                                    </label>
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <select name="account_status" id="account_status" class="form-control">
                                            {% for accountStatusDetail in accountStatusDetails %}
                                                <option value="{{ accountStatusDetail }}"{{ account_status == accountStatusDetail?' SELECTED':'' }}>{{ accountStatusDetail|title }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="account_type">{{ ta('account_type', 'Account Type') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="account_type" id="account_type" class="form-control" onChange="checkExpiryDate();">
                                            {% for accountTypeDetail in accountTypeDetails %}
                                                <option value="{{ accountTypeDetail['id'] }}"{{ account_type == accountTypeDetail['id']?' SELECTED':'' }}>{{ accountTypeDetail['label']|title }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group paid_account_expiry">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="expiry_date">{{ ta('paid_expiry_date', 'Paid Expiry Date') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input id="expiry_date" name="expiry_date" type="text" class="form-control" value="{{ expiry_date }}"/>
                                        <span class="text-muted">{{ ta('format_dd_mm_yyy_leave_empty_to_never_expire', 'Format: dd/mm/yyyy. Maximum 19th January 2038. Leave empty to never expire the account.') }}</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="storage_limit">{{ ta('filesize_storage_limit', 'Filesize Storage Limit') }}:
                                    </label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                        <div class="input-group">
                                            <input id="storage_limit" name="storage_limit" placeholder="i.e. 1073741824" type="text" class="form-control" value="{{ storage_limit }}"/>
                                            <span class="input-group-addon">{{ ta('bytes_lower', 'bytes') }}</span>
                                        </div>
                                        <span class="text-muted">{{ ta('optional_in_bytes_overrides_account_type_limits', 'Optional in bytes. Overrides account type limits. 1073741824 = 1GB. Use zero for unlimited.') }}</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="remainingBWDownload">{{ ta('download_allowance', 'Download Allowance') }}:
                                    </label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                        <div class="input-group">
                                            <input id="remainingBWDownload" name="remainingBWDownload" placeholder="i.e. 1073741824" type="text" class="form-control" value="{{ remainingBWDownload }}"/>
                                            <span class="input-group-addon">{{ ta('bytes_lower', 'bytes') }}</span>
                                        </div>
                                        <span class="text-muted">{{ ta('optional_in_bytes_generally_left_blank_use_zero_for_unlimited', 'Optional in bytes. Generally left blank. Use zero for unlimited.') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>User Details</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('details_about_the_user', 'Details about the user.') }}</p>
                                <br/>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="title">{{ ta('title', 'Title') }}:
                                    </label>
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <select name="title" id="title" class="form-control">
                                            <option value="">- {{ ta('not_set', 'not set') }} -</option>
                                            {% for titleItem in titleItems %}
                                                <option value="{{ titleItem }}"{{ title == titleItem?' SELECTED':'' }}>{{ titleItem|title }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first_name">{{ ta('first_name', 'First Name') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input id="first_name" name="first_name" type="text" class="form-control" value="{{ first_name }}"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last_name">{{ ta('last_name', 'Last Name') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input id="last_name" name="last_name" type="text" class="form-control" value="{{ last_name }}"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email_address">{{ ta('email_address', 'Email Address') }}:
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input id="email_address" name="email_address" type="text" class="form-control" value="{{ email_address }}"/>
                                    </div>
                                </div>                            
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('account_avatar', 'Account Avatar') }}</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('if_an_account_avatar_is_supported_on_the_site_set_it_here', 'If an account avatar is supported on the site theme, set it here.') }}</p>
                                <br/>

                                <div class="form-group">
                                    <label for="avatar" class="control-label col-md-3 col-sm-3 col-xs-12">{{ ta('select_file_jpg_png_or_gif', 'Select File (jpg, png or gif)') }}</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="file" class="form-control" id="avatar" name="avatar" {{ ta('select_file_jpg_png_or_gif', 'Select File (jpg, png or gif)')|json_encode()|raw }}>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>{{ ta('other_options', 'Other Options') }}</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <p>{{ ta('server_upload_override', 'Server upload override.') }}</p>
                                <br/>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="upload_server_override">{{ ta('upload_server_override', 'Upload Server Override') }}:
                                    </label>
                                    <div class="col-md-4 col-sm-4 col-xs-12">
                                        <select name="upload_server_override" id="upload_server_override" class="form-control">
                                            <option value="">- {{ ta('none_default', 'none (default)') }} -</option>
                                            {% for serverDetail in serverDetails %}
                                                <option value="{{ serverDetail['id'] }}"{{ upload_server_override == serverDetail['id']?' SELECTED':'' }}>{{ serverDetail['serverLabel'] }}</option>
                                            {% endfor %}
                                        </select>
                                        <span class="text-muted">{{ ta('useful_for_testing_new_servers_for_a_specific_user', 'Useful for testing new servers for a specific user. Leave as \'none\' to use the global settings.') }}</span>
                                    </div>
                                </div>

                                <div class="ln_solid"></div>
                                <div class="form-group">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                        <button type="button" class="btn btn-default" onClick="window.location = '{{ ADMIN_WEB_ROOT }}/user_manage';">{{ ta('cancel', 'Cancel') }}</button>
                                        <button type="submit" class="btn btn-primary">{{ ta('add_user', 'Add User') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input name="submitted" type="hidden" value="1"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}