<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>Note Detail</title>
    <script
            src="http://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous">
    </script>
    <!-- Kein Javascsript -->
    <noscript><a href=NoJavaScript.html>Kein Java Script</a></noscript>
     <!-- lib calendar resources -->
    <link rel="stylesheet" type="text/css" href="../lib/tcal/css/tcal.css">
    <script src="../lib/tcal/js/tcal.js"></script>

    <!-- moment, systemjs wrapped with comment for html-replace-->
    <!-- build:vendor -->
    <script src="../../node_modules/moment/moment.js"></script>
    <script src="../../node_modules/moment-timezone/builds/moment-timezone-with-data.js"></script>
    <script src="../../node_modules/systemjs/dist/system.js"></script>
    <!-- endbuild -->

    <!-- application resources -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">

    <!-- handlebars lib from cdn-->
    <script
            src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js">
    </script>

    <!-- appbundle.js is created with tsconfig options target es5 module system-->
    <script src="../appbundle.js"></script>

    <script>
        System.import("notedetail/NoteDetail");
    </script>
</head>
<body class="site">
<header role="banner">
    <h1>Notiz erstellen</h1>
</header>
<div class="note-content">
    <main class="note-detail">
        <form id="note-form" class="note-form" action="" method="post">
            <input id="note-id" class="input" name="id" type="number" hidden="hidden">
            <label for="note-id"></label>
            <input id="note-createdDate" class="input" name="createdDate" type="text" hidden="hidden">
            <label for="note-createdDate"></label>
            <input id="note-finishedDate" class="input" name="finishedDate" type="text" hidden="hidden">
            <label for="note-finishedDate"></label>
            <div class="item col1"><h4>Title</h4></div>
            <div class="item col2">
                <input id="note-title" class="input" name="title" type="text" required autofocus>
                <label for="note-title"></label>
            </div>
            <div class="item col1"><h4>Beschreibung</h4></div>
            <div class="item col2">
                <textarea id="note-description" class="description" name="beschreibung" cols="50" rows="5" required placeholder="Beschreiben Sie hier Ihre Notiz..."></textarea>
                <label for="note-description"></label>
            </div>
            <div class="item col1"><h4>Wichtigkeit</h4></div>
            <div class="item col2">
                <div class="rate">
                    <input type="radio" id="star5" name="rate" value="5" />
                    <label for="star5" title="Sehr wichtig und dringend"></label>
                    <input type="radio" id="star4" name="rate" value="4" />
                    <label for="star4" title="Sehr wichtig"></label>
                    <input type="radio" id="star3" name="rate" value="3" />
                    <label for="star3" title="wichtig"></label>
                    <input type="radio" id="star2" name="rate" value="2" checked="checked"/>
                    <label for="star2" title="Wenig wichtig"></label>
                    <input type="radio" id="star1" name="rate" value="1" />
                    <label for="star1" title="Nicht wichtig"></label>
                </div>
            </div>
            <div class="item col1"><h4>Erledigt bis:</h4></div>
            <div class="item col2">
                <input id="note-dueDate" type="text" name="dueDate" class="tcal duedate" required
                       placeholder="DD/MM/YYYY" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])/(0[1-9]|1[012])/[0-9]{4}">
                <label for="note-dueDate"></label>
            </div>
            <div class="item col1"></div>
            <div class="item col2">
                <div class="buttons">
                    <button id="btnBack" type="button">Zurück</button>
                    <button id="btnNoteReset" type="button">Reset</button>
                    <button id="btnNoteSave" type="submit" form="note-form">Speichern</button>
                </div>
            </div>
         </form>
        <div id="log" class="item col1 log"></div>
    </main>
</div>
<footer>
    <div class="item footer">CAS Frontend Engineering 2016<br>Authoren: Marc Labud, Michel Rimbeaux</div>
    <div class="item col2">
         <div class="footer-right">
             <label for="ddlb_stylesheetSelect">Design auswählen: </label>
             <select id="ddlb_stylesheetSelect">
                 <option value="StyleOne">DarkTheme</option>
                 <option value="StyleTwo" selected>BlueTheme</option>
             </select>
             <br>Projekt-Sourcen:&nbsp&nbsp<a class="git" href="https://github.com/marclabud/cas_fee_projectone">github</a>
         </div>
    </div>
</footer>
</body>
</html>