[% USE raw %]
[% PROCESS 'i18n.inc' %]
[% SET footerjs = 1 %]
    [% INCLUDE 'doc-head-open.inc' %]
    <title>[% FILTER collapse %]
        [% t("Image manager") | html %] &rsaquo;
        [% t("Patron card creator") | html %] &rsaquo;
        [% t("Tools") | html %] &rsaquo;
        [% t("Koha") | html %]
    [% END %]</title>
    [% INCLUDE 'doc-head-close.inc' %]
</head>

<body id="pcard_image-manage" class="tools pcard">
[% WRAPPER 'header.inc' %]
    [% INCLUDE 'cat-search.inc' %]
[% END %]


[% WRAPPER 'sub-header.inc' %]
    [% WRAPPER breadcrumbs %]
        [% WRAPPER breadcrumb_item %]
            <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
        [% END %]
        [% WRAPPER breadcrumb_item %]
            <a href="/cgi-bin/koha/patroncards/home.pl">Patron card creator</a>
        [% END %]
        [% WRAPPER breadcrumb_item bc_active= 1 %]
            <span>Image manager</span>
        [% END %]
    [% END #/ WRAPPER breadcrumbs %]
[% END #/ WRAPPER sub-header.inc %]

<div class="main container-fluid">
    <div class="row">
        <div class="col-sm-10 col-sm-push-2">
            <main>
                [% INCLUDE 'messages.inc' %]

                [% INCLUDE 'patroncards-toolbar.inc' %]
                <h1>Image manager</h1>
                [% INCLUDE 'patroncards-errors.inc' %]
                <div class="row">
                    <div class="col-sm-6">
                        <h2>Upload additional images for patron cards</h2>
                        <p>Manage additional images to use as logo, decoration or background on a patron card layout.</p>
                        <form name="upload_images" method="post" action="/cgi-bin/koha/patroncards/image-manage.pl" enctype="multipart/form-data">
                            <fieldset class="brief">
                                <div class="hint">Only PNG, GIF, JPEG, XPM formats are supported. Maximum image size is 2MB.</div>
                                <ol>
                                <li>
                                    <label for="uploadfile">Select the file to upload: </label>
                                    <input type="file" id="uploadfile" name="uploadfile" />
                                    <input type="hidden" id="image" name="filetype" value="image" />
                                </li>
                                <li>
                                    <label for="image_name">Image name: </label>
                                    <div class="hint">
                                        This will be the name by which you will refer to this image in the patron card layout editor.
                                    </div>
                                    <div class="hint">
                                        To replace an image, delete it, upload a new file and give it the same image name.
                                    </div>

                                    <input type="text" id="image_name" name="image_name" size="20" />
                                </li>
                                </ol>
                                [% IF ( IMPORT_SUCCESSFUL ) %]
                                    <div class="dialog message">
                                    <h3>Image successfully uploaded</h3>
                                    <ul><li>File: [% SOURCE_FILE | html %]</li>
                                    <li>Image name: [% IMAGE_NAME | html %]</li></ul>
                                    </div>
                                [% END %]
                            </fieldset>
                            <fieldset class="action">
                                <input type="hidden" name="op" value="upload" />
                                <input class="btn btn-primary" id="uploadsu" type="submit" value="Upload" />
                            </fieldset>
                        </form>
                    </div>
                    <div class="col-sm-6">
                    <h2>Delete images</h2>
                        [% IF ( TABLE ) %]
                        <form name="delete_images" method="post" action="/cgi-bin/koha/patroncards/image-manage.pl" enctype="multipart/form-data">
                            <fieldset class="brief">
                                <div class="hint">
                                    Select one or more images to delete.
                                </div>
                               <table>
                                    [% FOREACH TABL IN TABLE %]

                                    [% IF ( TABL.header_fields ) %]

                                    <tr>
                                    [% FOREACH header_field IN TABL.header_fields %]
                                    [% SWITCH header_field.field_label -%]
                                        [% CASE "ID" %]
                                            <th>Image ID</th>
                                        [% CASE "Name" %]
                                            <th>Name</th>
                                        [% CASE " " %]
                                            <th>Delete</th>
                                        [% CASE %]
                                           <th>[% header_field.field_label | html %]</th>
                                    [% END %]
                                    [% END %]
                                    </tr>
                                    [% ELSE %]
                                    <tr>
                                    [% FOREACH text_field IN TABL.text_fields %]
                                    [% IF ( text_field.select_field ) %]
                                        <td>
                                            <a class="delete_image btn btn-default btn-xs" href="/cgi-bin/koha/patroncards/image-manage.pl?op=delete&image_id=[% text_field.field_value | html %]"><i class="fa fa-trash-can"></i> Delete</a>
                                        </td>
                                        <td align="center"><input type="checkbox" name="action" value="[% text_field.field_value | html %]" /></td>
                                    [% ELSIF ( text_field.field_value ) %]
                                        <td>[% text_field.field_value | html %]</td>
                                    [% ELSE %]
                                        <td>&nbsp;</td>
                                    [% END %]
                                    [% END %]
                                    </tr>
                                    [% END %]
                                    [% END %]
                                </table>
                                [% IF ( DELETE_SUCCESSFULL ) %]
                                <div id="dialog" class="dialog message">
                                    <h3>Image(s) successfully deleted</h3>
                                </div>
                                [% END %]
                            </fieldset>
                            <fieldset class="action">
                                <input type="hidden" name="op" value="delete" />
                                <input class="btn btn-primary" type="button" id="delete" value="Delete selected" />
                            </fieldset>
                        </form>
                        [% ELSE %]
                        <fieldset class="brief">
                            <div class="hint">
                                No images are currently available.
                            </div>
                            [% IF ( DELETE_SUCCESSFULL ) %]
                                <div id="dialog" class="dialog message">
                                    <h3>Image(s) successfully deleted</h3>
                                </div>
                            [% END %]
                        </fieldset>
                        [% END %]
                    </div>
                </div>

            </main>
        </div> <!-- /.col-sm-10.col-sm-push-2 -->

        <div class="col-sm-2 col-sm-pull-10">
            <aside>
                [% INCLUDE 'tools-menu.inc' %]
            </aside>
        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
     </div> <!-- /.row -->

[% MACRO jsinclude BLOCK %]
    <script>
        function DeleteConfirm() {
            var results = selected_images("delete");
            if (results.images) {
                var msg = _("Are you sure you want to delete image(s): %s?").format(results.image_ids);
                var answer = confirm(msg);
                if (answer) {
                    window.location = "/cgi-bin/koha/patroncards/image-manage.pl?op=delete&" + results.images;
                } else {
                    return; // abort delete
                }
            } else {
                alert(_("Please select image(s) to delete."));
            }
        }

        function selected_images(op) {
            var selected = new Array;
            var image_ids = new Array;
            if (document.delete_images.action.length) {
                for (i=0;i<document.delete_images.action.length;i++){
                    if (document.delete_images.action[i].checked){
                        selected.push("image_id=" + document.delete_images.action[i].value);
                        image_ids.push(document.delete_images.action[i].value);
                    }
                }
                images = selected.join("&");
                return {images:images, image_ids:image_ids};
            }
            else if (document.delete_images.action.checked){
                    return {images:"image_id="+document.delete_images.action.value, image_ids:document.delete_images.action.value};
            }
            return (-1);
        }
        $(document).ready(function() {
            $("#delete").click(function(){
                return DeleteConfirm();
            });
            $(".delete_image").on("click", function(){
                return confirmDelete( _("Are you sure you want to delete this image?") );
            });
        });
    </script>
[% END %]

[% INCLUDE 'intranet-bottom.inc' %]
