<div class="view-content logo-tab">
<p class="description">
[% locale.maketext('You can customize two logos for the cPanel interface. You can upload a logo for a dark background and a light background. If you only provide one logo, the system will use it for light and dark backgrounds.') %]
</p>
<form id="form_customize_logos"
name="customization"
ng-submit="save(customization)">
<div class="section well">
<div class="form-row">
<div class="form-group upload-block col-xs-12 col-sm-12 col-md-8 col-lg-9">
<cp-file-upload id="logo_dark"
ng-model="model.forDarkBackground"
title="[% locale.maketext('Company Logo') %] - [% locale.maketext('used with dark background colors') %]"
browse-button-label = "[% locale.maketext('Browse') %]"
delete-button-title = "[% locale.maketext('Delete Logo') %]"
confirm-delete-message = "[% locale.maketext('This action deletes the dark background custom logo. The system will not preserve a copy of your custom logo.') %]"
file-type-error="[% locale.maketext('You must select a [asis,.svg] image file.') %]"
file-empty-error="[% locale.maketext('The selected file is empty.') %]"
file-max-size-error="{{ LOCALE.maketext('The selected file exceeds the maximum size ([format_bytes,_1]).', MAX_FILE_SIZE) }}"
mime-types="['image/svg+xml']"
preview-bg-color="backgroundColors.primaryDark"
on-delete="delete(customization, model.forDarkBackground.name)"
on-reset="reset(customization, model.forDarkBackground.name)"
input-classes = "col-xs-12 col-sm-8 col-md-8 col-lg-6"
preview-classes = "col-xs-12 col-sm-4 col-md-4 col-lg-4"
>
</cp-file-upload>
<cp-file-upload id="logo_light"
ng-model="model.forLightBackground"
title="[% locale.maketext('Company Logo') %] - [% locale.maketext('used with light background colors') %]"
browse-button-label = "[% locale.maketext('Browse') %]"
delete-button-title = "[% locale.maketext('Delete Logo') %]"
confirm-delete-message = "[% locale.maketext('This action deletes the light background custom logo. The system will not preserve a copy of your custom logo.') %]"
file-type-error="[% locale.maketext('You must select a [asis,.svg] image file.') %]"
file-empty-error="[% locale.maketext('The selected file is empty.') %]"
file-max-size-error="{{ LOCALE.maketext('The selected file exceeds the maximum size ([format_bytes,_1]).', MAX_FILE_SIZE) }}"
mime-types="['image/svg+xml']"
preview-bg-color="backgroundColors.primaryLight"
on-delete="delete(customization, model.forLightBackground.name)"
on-reset="reset(customization, model.forLightBackground.name)"
input-classes = "col-xs-12 col-sm-8 col-md-8 col-lg-6"
preview-classes = "col-xs-12 col-sm-4 col-md-4 col-lg-4"
>
</cp-file-upload>
</div>
<div class="form-group upload-help callout callout-info col-xs-12 col-sm-12 col-md-4 col-lg-3">
<div class="callout-header">Limitations and Recommendation for Logos</div>
<span class="callout-container">
<p>
<ul>
<li>[% locale.maketext('You can only use the [asis,.svg] file format.') %]</li>
<li>[% locale.maketext('We recommend a width and height of 200px by 100px.') %]</li>
<li>[% locale.maketext('We recommend specifying the width and height in the SVG file for the logos to render properly.') %]</li>
</ul>
</p>
</span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label id="lblIconDescription" for="icon_description">
[% locale.maketext('Description') %]
</label>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<input id="icon_description"
name="icon_description"
class="form-control"
maxlength="50"
ng-model="model.description" />
<span class="help-block">
[% locale.maketext('The description is used in the title of the image tag and cannot exceed 50 characters. These titles provide additional assistance to screen readers and other assistive technology. Some browsers also show the title if you hover over the image.') %]
</span>
</div>
</div>
</div>
<div class="form-group">
<button id="btn_save"
type="submit"
class="btn btn-primary"
ng-class="{'btn-loading': saving}"
ng-disabled="customization.$invalid || saving">
<span class="btn-label">[% locale.maketext('Update Logos') %]</span>
<span class="glyphicon glyphicon-refresh btn-loading-indicator"></span>
</button>
</div>
</div>
</form>
</div>