{% extends "secrets/secret_addedit.html" %}
{% load i18n %}
{% block "form_attributes" %}enctype="multipart/form-data"{% endblock %}
{% block "content_type_fields" %}
<script>
$(document).on('change', '.btn-file :file', function() {
	var input = $(this);
	label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
	input.trigger('fileselect', [label]);
});

$(document).ready( function() {
	$('.btn-file :file').on('fileselect', function(event, label) {
		var input = $(this).parents('.input-group').find(':text');
		input.val(label);
	});
});
</script>
<div class="form-group">
	<div class="col-sm-2">
		<label class="control-label" for="id_file">{% trans "File" %}</label>
	</div>
	<div class="col-sm-6">
		<div class="input-group">
			<input type="text" class="form-control" readonly autocomplete="off" placeholder="{% if secret %}{% trans "(unchanged)" %}{% else %}{% trans "No file selected" %}{% endif %}">
			<span class="input-group-btn">
				<span class="btn btn-default btn-file">
					{% trans "Browse..." %} <input id="id_file" name="file" type="file" {% if not secret %}required="required"{% endif %}>
				</span>
			</span>
		</div>
	</div>
	<div class="col-sm-4">
		<p class="form-control-static"><i class="fa fa-lock"></i> &nbsp; {% trans "This file will be stored securely." %}</p>
	</div>
</div>
{% endblock %}
