<html>
<head>
<title>Emailer</title>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="Fill out this form to send email">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<h2 class="mb-3">Send Email</h2>
<h4 id="result" style="color:red;"></h4>
<form id="emailForm">
<!-- Input type text -->
<div class="form-group row ">
<label for="pass" class="col-sm-1 col-form-label text-right">Password</label>
<div class="col-sm-11">
<input type="password" class="form-control form-control-sm" name="pass" id="pass" placeholder="Password" required>
</div>
</div>
<!-- Input type text -->
<div class="form-group row ">
<label for="email" class="col-sm-1 col-form-label text-right">From</label>
<div class="col-sm-11">
<input type="email" class="form-control form-control-sm" name="from_email" id="from_email" placeholder="from@place.com" required>
</div>
</div>
<!-- Input type text -->
<div class="form-group row ">
<label for="input_id_3" class="col-sm-1 col-form-label text-right">To</label>
<div class="col-sm-11">
<input type="email" class="form-control form-control-sm" name="to_email" id="to_email" placeholder="to@place.com" required>
</div>
</div>
<!-- columns -->
<div class="form-group row">
<label class="col-sm-1 col-form-label text-right"></label>
<div class="col-sm-11">
<div class="header-row">
<!-- The first header/value/delete form will be added dynamically when you click "Add Header" -->
</div>
</div>
</div>
<!-- button -->
<div class="form-group row">
<label for="button_id_8" class="col-sm-1 col-form-label text-right"></label>
<div class="col-sm-11">
<input type="hidden" id="headerCount" name="headerCount" value="0">
<button type="button" class="btn btn-secondary btn-sm" id="addHeaderButton">Add Header</button>
</div>
</div>
<!-- Input type file -->
<div class="form-group row ">
<label for="attachment" class="col-sm-1 col-form-label text-right">File</label>
<div class="col-sm-11">
<div class="custom-file">
<input type="file" class="custom-file-input" name="attachment" id="attachment">
<label class="custom-file-label form-control form-control-sm" for="attachment">Choose File</label>
</div>
</div>
</div>
<!-- Input type text -->
<div class="form-group row ">
<label for="input_id_3" class="col-sm-1 col-form-label text-right">Subject</label>
<div class="col-sm-11">
<input type="text" class="form-control form-control-sm" name="subject" id="subject" placeholder="summary of email" required>
</div>
</div>
<!-- columns -->
<div class="form-group row content-form">
<label class="col-sm-1 col-form-label text-right">Content</label>
<div class="col-sm-11">
<!-- nav options -->
<ul class="nav nav-tabs mb-3 shadow-sm" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-plain-tab" data-toggle="tab" href="#pills-plain" role="tab" aria-controls="pills-plain" aria-selected="true">Plain</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-html-tab" data-toggle="tab" href="#pills-html" role="tab" aria-controls="pills-html" aria-selected="false">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-render-tab" data-toggle="tab" href="#pills-render" role="tab" aria-controls="pills-render" aria-selected="false">Render</a>
</li>
</ul>
<!-- content -->
<div class="tab-content" id="pills-tabContent p-3">
<!-- 1st card -->
<div class="tab-pane fade show active" id="pills-plain" role="tabpanel" aria-labelledby="pills-plain-tab">
<div class="col-md-12 mb-3">
<textarea class="form-control" rows="8" name="plaintext_content" id="plaintext_content" placeholder="email content goes here..." required></textarea>
</div>
</div>
<!-- 2nd card -->
<div class="tab-pane fade" id="pills-html" role="tabpanel" aria-labelledby="pills-html-tab">
<div class="col-md-12 mb-3">
<textarea class="form-control" rows="8" name="html_content" id="html_content" placeholder="<html>..." ></textarea>
</div>
</div>
<!-- 3nd card -->
<div class="tab-pane fade third" id="pills-render" style="height:auto; min-height:auto" role="tabpanel" aria-labelledby="pills-render-tab">
<div class="col-md-12 mb-3">
<iframe class="form-control resizable-iframe" style="height:auto; min-height:auto" id="iframe_id"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- button -->
<div class="form-group row mt-auto">
<label for="submit" class="col-sm-1 col-form-label text-right"></label>
<div class="col-sm-11">
<button type="button" class="btn btn-primary btn-block btn-sm" name="submit" id="submit" onclick="submitForm()">Send</button>
</div>
</div>
</form>
</div>
</body>
</html>