{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify %}

{% block extrahead %}{{ block.super }}
<script src="{% url 'admin:jsi18n' %}"></script>
{{ media }}
{% endblock %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static "admin/css/forms.css" %}">
<link rel="stylesheet" href="/static/css/change-form.css">
{% endblock %}

{% block coltype %}colM{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-form{% endblock %}

{% if not is_popup %}	
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
&rsaquo; {% if has_view_permission %}<a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>{% else %}{{ opts.verbose_name_plural|capfirst }}{% endif %}
&rsaquo; {% if add %}{% blocktranslate with name=opts.verbose_name %}Add {{ name }}{% endblocktranslate %}{% else %}{{ original|truncatewords:"18" }}{% endif %}
</div>
{% endblock %}
{% endif %}

{% block content %}
<div class="card card-flush">
	<div class="card-body pt-5 px-8">
		<div id="content-main">
			{% block object-tools %}
			{% if change and not is_popup %}
			  <divl class="object-tools d-flex justify-content-end mb-5">
					{% block object-tools-items %}
						{% change_form_object_tools %}
					{% endblock %}
			  </div>
			{% endif %}
			{% endblock %}
			<form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" novalidate>{% csrf_token %}{% block form_top %}{% endblock %}
				<div>
					{% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1">{% endif %}
					{% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">{% endif %}
					{% if save_on_top %}{% block submit_buttons_top %}{% submit_row %}{% endblock %}{% endif %}
					{% if errors %}
						<p class="text-danger">
							{% blocktranslate count counter=errors|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
						</p>
						{{ adminform.form.non_field_errors }}
					{% endif %}
					
					{% block field_sets %}
						{% for fieldset in adminform %}
							{% include "admin/includes/fieldset.html" %}
						{% endfor %}
					{% endblock %}
					
					{% block after_field_sets %}{% endblock %}
					
					{% block inline_field_sets %}
						{% for inline_admin_formset in inline_admin_formsets %}
							{% include inline_admin_formset.opts.template %}
						{% endfor %}
					{% endblock %}
					
					{% block after_related_objects %}{% endblock %}
					
					{% block submit_buttons_bottom %}{% submit_row %}{% endblock %}
					
					{% block admin_change_form_document_ready %}
						<script id="django-admin-form-add-constants"
								src="{% static 'admin/js/change_form.js' %}"
								{% if adminform and add %}
									data-model-name="{{ opts.model_name }}"
								{% endif %}
								async>
						</script>
					{% endblock %}
					
					{# JavaScript for prepopulated fields #}
					{% prepopulated_fields_js %}
			
				</div>
			</form>
		</div>
	</div>
</div>
<script>
    $(document).ready(function(){
        $('.vDateField').addClass('form-control');
        $('.vTimeField').addClass('form-control');
        $('#id_groups_input').addClass('form-control ms-0');
        $('#id_groups_selected_input').addClass('form-control ms-0');
        $('#id_user_permissions_input').addClass('form-control ms-0');
        $('#id_user_permissions_selected_input').addClass('form-control ms-0');
        $('#id_permissions_input').addClass('form-control ms-0');
        $('#id_permissions_selected_input').addClass('form-control ms-0');
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                console.log(reader);
                reader.onload = function (e) {
                    $('#previmg').attr('src', reader.result);
                    console.log(reader.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $('input[type="file"]').change(function (e) {  
            $(this).parent().append('<img src="" id="previmg">');
            readURL(this);
        });

        var img = $('.file-upload').parent().find('a').attr('href');
    });
</script>
{% endblock %}
