[%# media/new.tt

Page to upload new files

Authors:
    Afuna <coder.dw@afunamatata.com>

Copyright (c) 2013-2018 by Dreamwidth Studios, LLC.

This program is free software; you may redistribute it and/or modify it under
the same terms as Perl itself.  For a copy of the license, please reference
'perldoc perlartistic' or 'perldoc perlgpl'.
%]

[% sections.title = ".title" | ml %]

[%- CALL dw.active_resource_group( "foundation" ) -%]

[%- dw.need_res( { group => "foundation" }
    "js/jquery/jquery.ui.widget.js"
    "js/jquery.fileupload.js"

    "js/vendor/jquery.iframe-transport.js"
    "js/vendor/jquery.fileupload.js"
    "js/vendor/load-image.min.js"
    "js/vendor/jquery.fileupload-process.js"
    "js/vendor/jquery.fileupload-image.js"

    "stc/css/pages/media/new.css"
) -%]

<p>[% dw.ml(".intro" {aopts1 => '/file/list', aopts2 => '/file/edit'}) %]</p>

<div class="row">
    <div class="large-12 columns">
    <form enctype="multipart/form-data" method="POST" class='upload-form'>
        <fieldset class="upload-form-file-inputs">
        <legend>[% '.upload.legend' | ml %]</legend>
        <div class="row">
            <div class="large-12 columns">
                <input type="file" id="files" name="files" />
            </div>
        </div>
        </fieldset>

        <div class="row" >
            <output class="large-12 columns upload-form-preview"><ul></ul></output>
        </div>


        <div class="row">
            <div class="large-3 columns">
                [% form.submit(
                    name = "upload"
                    value = dw.ml( ".upload.submit" )
                ) %]
            </div>
            <div class="large-9 columns">
                <div class="log alert-box" role="log"></div>
            </div>
        </div>
    </form>
    </div>
</div>

<script id='template-file-metadata' type="text/x-template">
[% BLOCK row_with_field %]
[% DEFAULT
    labelSize = 2
    fieldSize = 12 - labelSize
    type      = "text"
%]
<div class="row">
    <div class="large-[% labelSize %] columns">
        [%-# "for" will be added by JS -%]
        <label data-for-name="[% name %]">[% label %]</label>
    </div>
    <div class="large-[% fieldSize %] columns">
        [%-# "id" will be added by JS -%]
        [% IF type == "text" %]
            [%- form.textbox( "name" = name, "data-generated" = "true" ) -%]
        [% ELSIF type == "textarea" %]
            [%- form.textarea( "name" = name, rows = 3 ) -%]
        [% ELSIF type == "select" %]
            [%- form.select( "items"   = items
                             "name"    = name
                             "selected" = selected
                           )
            -%]
        [% END %]
    </div>
</div>
[% END %]

<li class='row'>
    <div class="large-3 columns image-preview">
        <div class="progress secondary"><span class="meter" style="width:0"></span></div>
    </div>
    <div class="large-9 columns">
        <div class="alert-box success" style="display:none;">[% dw.ml(".success") %]</div>
        <div class="row">
            <div class="large-8 columns">
                [%- INCLUDE row_with_field(
                        label = dw.ml( ".label.title" )
                        name  = "title"

                        labelSize = 3
                ) -%]
            </div>
            <div class="large-4 columns">
                [%- INCLUDE row_with_field(
                    label = dw.ml( ".label.security" )
                    name  = "security"

                    type  = "select"
                    items = security
                    selected = default_security

                    labelSize = 4
                ) -%]
            </div>
        </div>
        [%- INCLUDE row_with_field( label = dw.ml( ".label.alttext" ), name = "alttext", type = "text" ) %]
        [%- INCLUDE row_with_field( label = dw.ml( ".label.description" ), name = "description", type = "textarea" ) %]
        [%- INCLUDE row_with_field( label = "Image Code", name="generated-code" ) -%]
    </div>
</li>
</script>