{html_style}
.graphicalCheckbox {
font-size:16px;
line-height:16px;
}

input[type=checkbox] {
display:none;
}
{/html_style}

{footer_script}{literal}
jQuery(document).ready(function() {
jQuery('form li label input[type=checkbox]').change(function() {
jQuery(this).prev().toggleClass('icon-check icon-check-empty');
});
});
{/literal}{/footer_script}

<div class="titrePage">
<h2>{'Smartpocket, Configuration Page'|@translate}</h2>
</div>
<form method="post" class="properties" action="" ENCTYPE="multipart/form-data" name="form" class="properties">
<div id="configContent">
<fieldset>
<legend>{'Slideshow Options'|@translate}</legend>
<ul>

<li><label>
<span class="property">{'Loop the slideshow'|@translate}</span>&nbsp;
<span class="graphicalCheckbox icon-check{if not $options.loop}-empty{/if}">&nbsp;</span>
<input type="checkbox" name="loop"{if $options.loop} checked="checked"{/if}>
</label></li>

<li><label>
<span class="property">{'Autohide the bar of the slideshow'|@translate}</span>&nbsp;
<span class="graphicalCheckbox icon-check{if $options.autohide != 5000}-empty{/if}">&nbsp;</span>
<input type="checkbox" name="autohide"{if $options.autohide == 5000} checked="checked"{/if}>
</label></li>

</ul>
</fieldset>
</div>
<p>
<input class="submit" type="submit" value="{'Submit'|@translate}" name="submit_smartpocket" />
</p>
</form>