{{define "title"}}
    {{.tittle}}
{{end}}

{{define "body"}}
    <style>
        img {
            width: 100% !important;
            max-width: 300px;
            height: auto !important;
        }
        section {
            background-color: white;
            border-radius: 10px;
            max-width: 400px;
            padding: 5px;
        }
        .middle {
            display: grid;
        }
        p, h2 {
            margin: 10px 10px;
        }
        .grid-container {
            display: grid;
            grid-template-columns: auto;
            align-items: center;
            text-align: center;
        }

        @media only screen and (min-width: 700px) {
            .grid-container {grid-template-columns: auto auto;}
        }
        
        .grid-item {
            border: 2px solid black;
            border-radius: 5px;
            text-align: center;
        }

        a:link {
            text-decoration: none;
        }

        input::placeholder {
            font-size: 18px;
        }
    </style>
    <center>
        <section style="font-size: 25px;">
            <h2>Please input file data.</h2>
            <br>
            <form class="grid-container" action="/file" method="post">
                <label for="filename">File:</label>
                <input type="text" name="filename" id="filename" placeholder="File Name" required>
                <button type="submit" style="grid-column: 1 / 3;">Submit</button>
            </form>
        </section>
    </center>
{{end}}