
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <script async src="{{ url_for('static', filename='js/script.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="icon" href="{{ url_for('static', filename='social-media.png') }}">
  <!-- <a href="https://www.flaticon.com/free-icons/marketing" title="marketing icons">Marketing icons created by Freepik - Flaticon</a> --->
    <title>Social Media Automation</title>
</head>
<body>

    <nav class="navbar">
        <div class="nav-container">
            <a href="/" class="nav-logo">Social Media Automation</a>
            <ul class="nav-links">
            <li><a href="{{ url_for('home') }}">Home</a></li>
                <li><a href="{{ url_for('instagram_form') }}">Instagram</a></li>
            <li><a href="{{ url_for('tweet_form') }}">Twitter</a></li>
                <li><a href="{{ url_for('email_form') }}">Emails</a></li>
                <li><a href="">My Stats</a></li>
            {% if logged_in %}
                <li><a href="{{ url_for('logout') }}">Log Out</a></li>
            {% else %}
                <li><a href="{{ url_for('login') }}">Login</a></li>
                <li><a href="{{ url_for('register') }}">Register</a></li>
            {% endif %}
            </ul>
        </div>
    </nav>

    <div class="content-container">
    <div class = main-content>
    <h1>Instagram Automation</h1>
    <button id="view-schedule-btn" onclick="window.location.href='{{ url_for('user_recurring_posts') }}';">View Scheduled Posts</button>

    <h2>Post an Image</h2>
    <form id = "instagram_form" action="/post" method="post" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        Username: <label>
        <input type="text" name="username" required>
    </label><br>
        Password: <label>
        <input type="password" name="password" required>
    </label><br>
        Photo: <label>
        <input type="file" name="photo" accept="image/*">
    </label><br>
        AI Image Prompt: <label>
    <input type="text" name="ai_prompt">
    </label><br>
        Caption: <label>
        <textarea name="caption"></textarea>
    </label><br>
        Caption On Image: <label>
        <textarea name="caption_on_image"></textarea>
    </label><br>
        Schedule Time: <label>
    <input type="datetime-local" name="schedule_time">
    </label><br>
        Post Every (hours): <label>
    <input type="number" step="0.01" name="post_interval_hours">
    </label><br>
        <div>
            <h4>Additional Post Options:</h4>
        </div>
         <label><input type="checkbox" name="news_checkbox" value="1"> Post AI generated headline of current news?</label>
        <label>
        <input type="text" name="url_to_scrape" placeholder="Enter a URL to get data from">
        </label><br>
        <input type="submit" value="Post Image" class = "submit-btn">
    </form>

    <h2>Like a Post</h2>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <form action="/like" method="post">
        Username: <label>
        <input type="text" name="username" required>
    </label><br>
        Password: <label>
        <input type="password" name="password" id="pass2" required>
    </label><br>
        Media ID: <label>
        <input type="text" name="media_id" required>
    </label><br>
        Schedule Time: <label>
    <input type="datetime-local" name="schedule_time_like">
    </label><br>
        <input type="submit" value="Like Post" class = "submit-btn">
    </form>

    <h2>Comment on a Post</h2>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <form action="/comment" method="post">
        Username: <label>
        <input type="text" name="username" required>
    </label><br>
        Password: <label>
        <input type="password" name="password" id = "pass3" required>
    </label><br>
        Media ID: <label>
        <input type="text" name="media_id" required>
    </label><br>
        Comment: <label>
        <textarea name="comment" required></textarea>
    </label><br>
         Schedule Time: <label>
    <input type="datetime-local" name="schedule_time_com">
    </label><br>
        <input type="submit" value="Comment" class = "submit-btn">
    </form>
    </div>
    </div>

<div class="modal" tabindex="-1" role="dialog" id="loadingModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Uploading...</h5>
      </div>
      <div class="modal-body">
        <p>We are uploading your image to Instagram. Do not close this window, or you may lose image credits.</p>
          <div class="loader"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel Post</button>
      </div>
    </div>
  </div>
</div>
<footer>
        <p><a href="#"><span>Contact Us</span></a> | <a href="#"><span>Terms of Service</span></a> | <a href="#"><span>Privacy Policy</span></a></p>
    </footer>
</body>
</html>
