<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embed Builder</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'
        rel='stylesheet' type='text/css'>
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'
        type='text/css'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <% if(data==="not-found-err" ) { %>
        <script>
            alert("Invalid channel Id! Make Sure you are giving a channel id of a guild in have joined!")
            window.location.href = "<%= url %>"
        </script>
        <% } %>

            <% if(data==="invalid-char" ) { %>
                <script>
                    alert("Invalid Length! Guild Must be 18 charaters!")
                    window.location.href = "<%= url %>"
                </script>
                <% } %>

                    <% if(data==="success" ) { %>
                        <script>
                            alert("Successfully Sent the Embed!")
                            window.location.href = "<%= url %>"
                        </script>
                    <% } %>

                    <% if(data==="missing" ) { %>
                        <script>
                            alert("Missing Permissions! I Dont Have Permissions to Send Embed in that channel.")
                            window.location.href = "<%= url %>"
                        </script>
                    <% } %>

                <form action="/api/sendEmbed" method="POST">
                    <div class="container py-3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row justify-content-center">
                                            <div class="col-md-10 offset-md-1">
                                                <span class="anchor" id="formComplex"></span>
                                                <!-- form complex example -->
                                                <div class="card card-outline-secondary">
                                                    <div class="card-header">
                                                        <h3 class="mb-0">Embed Builder</h3>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row mt-4">
                                                            <div class="col-sm-5 pb-3">
                                                                <label for="exampleAccount">Channel Id*</label>
                                                                <input class="form-control" name="channelid"
                                                                    id="channelid" placeholder="831061201009377282"
                                                                    type="number" max="999999999999999999"
                                                                    min="111111111111111111">
                                                            </div>
                                                            <div class="col-sm-6 pb-3">
                                                                <label for="thumbnail">Thumbnail</label>
                                                                <input class="form-control" id="thumbnail" name="thumbnail"
                                                                    type="url" >
                                                            </div>
                                                            <div class="col-sm-6 pb-3">
                                                                <label for="title">Title</label>
                                                                <input class="form-control" id="title" name="title"
                                                                    type="text" required>
                                                            </div>
                                                            <div class="col-sm-6 pb-3">
                                                                <label for="image">Image</label>
                                                                <input class="form-control" id="image" name="image"
                                                                    type="url" >
                                                            </div>
                                                            <div class="col-sm-3 pb-3">
                                                                <label for="timestamp">Timestamp</label> <select
                                                                    class="form-control custom-select" id="timestamp" name="timestamp">
                                                                    <option value="no">
                                                                        No
                                                                     </option>
                                                                    <option value="yes">
                                                                       Yes
                                                                    </option>
                                                    
                                                                </select>
                                                            </div>
                                                            <div class="col-sm-3 pb-3">
                                                                <label for="footer">Footer</label>
                                                                <input class="form-control" id="footer" name="footer" type="text">
                                                            </div>
                                                            <div class="col-md-6 pb-3">
                                                                <label for="description">Description</label>
                                                                <textarea class="form-control"
                                                                    id="description" name="description" required rows="3"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-footer">
                                                        <div class="float-right">
                                                            <input class="btn btn-secondary" type="reset"
                                                                value="Cancel">
                                                            <input class="btn btn-primary" type="submit" value="Send">
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--/card-->
                                            </div>
                                        </div>
                                        <!--/row-->
                                    </div>
                                    <!--/col-->
                                </div>
                                <!--/row-->
                    </div>
                </form>
</body>
</html>