<!DOCTYPE html>
<!--
    FileSpread
    A simple file-spread-over-mail web app

    MIT License

    2015 - 2016 (c) Marcel Kapfer (mmk2410) <marcelmichaelkapfer@yahoo.co.nz>
-->
<html>
    <head>
        <meta charset="utf-8" />
        <title>FileSpread</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <meta name="description" content="A web file spreader over mail" />

        <meta name="theme-color" content="#9c27b0" />

        <link rel="manifest" href="manifest.json" />

        <meta name="msapplication-TileColor" content="#9c27b0"/>

        <meta name="mobile-web-app-capable" content="yes"/>
        <meta name="application-name" content="FileSpread"/>
        <!--
        <meta rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"/>
        -->

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-mobile-web-app-title" content="FileSpread"/>
        <!--
        <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png" />
        -->

        <!--
        <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon0144x144.png" />
        -->

        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:400,600,300,700" />
        <link rel="stylesheet" type="text/css" href="./res/css/main.css" />
    </head>
    <body>
        <div class="header">
            <span class="title">FileSpread</span>
        </div>

        <section class="card">
            <div class="headline">File Upload</div>
            <p>
                Choose a file to spread
            </p>
            <form action="res/php/upload.php" enctype="multipart/form-data" method="POST">
                <input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
                <input name="userfile" type="file" value="Choose a file" />
                <br />
                <br />
                <input type="submit" class="button" style="padding: 0px;" value="UPLOAD" />
            </form>
        </section>

        <section class="card">
            <div class="headline">Email content</div>
            <p>
                Select a template:
            </p>
            <select id="templates_list"></select>
            <p>Change the text of the email if you want.</p>
            <p>Title:</p><input id="mailtitle" name="title" class="itextfield" />
            <p>Text:</p><textarea id="mailtext" name="text" class="itextarea"></textarea>
	    <p><input type="checkbox" class="icheckbox" id="nofile" />Send without file</p>
            <p>Filename:</p><input id="filename" name="filename" class="itextfield" />
        </section>

        <section class="card">
            <div class="headline">Email Addresses</div>
            <p>
                Select a address list:
            </p>
            <select id="address_list"></select>
            <p>These are the email addresses, the mail is going to be send.</p>
            <div id="addresses"></div>
        </section>

        <section class="card">
            <div class="headline">Send Mail</div>
            <p>
                Send now the the mail with the file attachment to the listed addresses.
            </p>
            <span class="button" id="send">SEND</span>
        </section>

        <section class="card">
            <div class="headline">Change Template</div>
            <p>
                Select a template you want to change:
            </p>
            <select id="edit_templates_list">
                <option value="none">None Selected</option>
            </select>
            <p class="edit_template">Change the text of the template.</p>
            <p class="edit_template">Title:</p><input id="edit_mailtitle" name="title" class="itextfield edit_template" />
            <p class="edit_template">Text:</p><textarea id="edit_mailtext" name="text" class="itextarea edit_template"></textarea>
            <p class="edit_template">Filename:</p><input id="edit_filename" name="filename" class="itextfield edit_template" />
            <p class="edit_template">
                <span class="button" id="save_template">SAVE</span>
            </p>
        </section>

        <section class="card">
            <div class="headline">Create Template</div>
            <p>
                Template name (filename.txt):
            </p>
            <input id="create_template_name" name="filename" class="itextfield" />
            <p>
                <span class="button" id="create_template">CREATE</span>
            </p>
        </section>

        <section class="card">
            <div class="headline">Delete Template</div>
            <p>
                Select the template you want to remove:
            </p>
            <select id="remove-template-list">
                <option value="none">None Selected</option>
            </select>
            <p class="remove_template">
                <span class="button" id="remove-template">REMOVE</span>
            </p>
        </section>

        <section class="card">
            <div class="headline">Change List</div>
            <p>
                Select the address list you want to change:
            </p>
            <select id="edit-address-list">
                <option value="none">None Selected</option>
            </select>
            <p class="edit_address">Change the content of the list:</p>
            <textarea id="edit-addresses" class="itextarea edit_address"></textarea>
            <p class="edit_address">
                <span class="button" id="save-addresses">SAVE</span>
            </p>
        </section>

        <section class="card">
            <div class="headline">Create List</div>
            <p>
                List name (filename.txt):
            </p>
            <input id="create-list-name" name="filename" class="itextfield" />
            <p>
                <span class="button" id="create-list">CREATE</span>
            </p>
        </section>

        <section class="card">
            <div class="headline">Delete List</div>
            <p>
                Select the list you want to remove:
            </p>
            <select id="remove-list-list">
                <option value="none">None Selected</option>
            </select>
            <p class="remove_list">
                <span class="button" id="remove-list">REMOVE</span>
            </p>
        </section>

        <script src="./res/js/jquery-2.1.4.min.js"></script>
        <script src="./res/js/main.js"></script>
	    <script async src="./res/dart/main.dart.js"></script>
    </body>
</html>