<script>
    $(function(){
        var uqs = {$uniqid};	// uniqid suffix
        $.each([
                    '#DeleteModalConfirm',
                    '.editReferenceButton',
                    '.selectReferenceButton'

		], function(k, v){
			$(document).on('click', v + uqs, function(){
				$.nette.ajax({
					url: $(this).data('signal-url')
				});
			});
		});

        $(document).on('click', '.deleteButton' + uqs, function() {
            var signal_url = $(this).data('signal-url');
            $('#DeleteModalConfirm' + uqs).data('signal-url', signal_url);
        });
    });
</script>



<div class="modal fade" id="DeleteModal{$uniqid}" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel{$uniqid}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="DeleteModalLabel{$uniqid}">Delete Reference</h4>
            </div>
            <div class="modal-body" id="DeleteModalBody{$uniqid}">
                Are you sure to delete?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="DeleteModalConfirm{$uniqid}">Delete</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="AddNewReferenceModal{$uniqid}" tabindex="-1" role="dialog" aria-labelledby="AddNewReferenceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="AddNewReferenceModalLabel{$uniqid}">Add new Reference</h4>
            </div>
              {snippet addForm}
                  {form addForm, class => "ajax form-horizontal addForm"}
                    <div class="modal-body">
                      <div class="form-group required">
                        <div class="col-sm-2 control-label">
                          {label reference_id /}
                        </div>
                        <div class="col-sm-10">
                          {input reference_id}
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <div class="form-group">
                        <div class="col-sm-2">

                        </div>
                        <div class="col-sm-8">
                          {input send, class => "btn btn-primary"}
                        </div>
                      </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function () {
                            $('form.addForm select[name=reference_id]').select2({
                                dropdownParent: $('#AddNewReferenceModal{$uniqid|noescape}'),
                                width: "100%"
                            });
                        });
                    </script>
                    {if !empty($entityAdded)}
                      <script>
                        $('#AddNewReferenceModal{$uniqid|noescape}').modal('hide');
                      </script>
                    {/if}
                   {/form}
               {/snippet}
		         </div>
     </div>
</div>

<div class="modal fade" id="EditReferenceModal{$uniqid}" tabindex="-1" role="dialog" aria-labelledby="EditReferenceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="EditNewReferenceModalLabel{$uniqid}">Edit Reference</h4>
            </div>
              {snippet editForm}
                  {form editForm, class => "ajax form-horizontal"}
                    <div class="modal-body">
                      <div class="form-group required">
                        <div class="col-sm-2 control-label">
                          {label text /}
                        </div>
                        <div class="col-sm-10">
                          {input text}
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <div class="form-group">
                        <div class="col-sm-2">

                        </div>
                        <div class="col-sm-8">
                          {input save, class => "btn btn-primary"}
                        </div>
                      </div>
                    </div>
                    {if !empty($entityEdited)}
                      <script>
                        $('#EditReferenceModal{$uniqid|noescape}').modal('hide');
                      </script>
                    {/if}
                   {/form}
               {/snippet}
		         </div>
     </div>
</div>
<div class="modal fade" id="SelectReferenceModal{$uniqid}" tabindex="-1" role="dialog" aria-labelledby="SelectReferenceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="SelectReferenceModalLabel{$uniqid}">Select Reference</h4>
            </div>
              {snippet selectForm}
                  {form selectForm, class => "ajax form-horizontal selectForm"}
                    <div class="modal-body">
                      <div class="form-group required">
                        <div class="col-sm-2 control-label">
                          {label reference_id /}
                        </div>
                        <div class="col-sm-10">
                          {input reference_id}
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <div class="form-group">
                        <div class="col-sm-2">

                        </div>
                        <div class="col-sm-8">
                          {input save, class => "btn btn-primary"}
                        </div>
                      </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function () {


                          $('form.selectForm select[name=reference_id][class^="select2"]').select2("destroy");
                            $('form.selectForm select[name=reference_id]').select2({
                                dropdownParent: $('#SelectReferenceModal{$uniqid|noescape}'),
                                width: "100%"
                            });
                        });
                    </script>
                    {if !empty($entitySelected)}
                      <script>
                        $('#SelectReferenceModal{$uniqid|noescape}').modal('hide');
                      </script>
                    {/if}
                   {/form}
               {/snippet}
		         </div>
     </div>
</div>

{snippet deleteEntity}
	{if !empty($entityDeleted)}
		<script>
			$('#DeleteModal{$uniqid|noescape}').modal('hide');
			refresh();
		</script>
	{/if}
{/snippet}
