{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <title>Create/Update Announcement</title>
</head>
<body>
    <div class="container">
        <style>
            textarea {
                width: 100%;
                min-height: 200px;
            }
            body {
               padding-top: 40px;
            }
        </style>
        <form method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="Save">
        </form>
        {{ form.media }}
    </div>
    <script>
        function convertToSlug(text) {
            // return encodeURI(text.toLowerCase().replace(/ +/g, '-'));
            return text.toLowerCase().replace(/[ ;\.\:\?\!@#\$%\^&\*\(\)\=\+\<\>`~·，。“”？！《》【】：；\\{}\[\]]+/g, '-');
        }
        document.getElementById("id_title").addEventListener('input', function (evt) {
            document.getElementById("id_slug").value = convertToSlug(this.value);
        });
    </script>
</body>
</html>