{% extends 'site_layout.html.j2' %}
{% set title="Adding bot to server" %}

{% block content %}
<h1>Would you like to invite Titan to your server?</h1>
<p class="flow-text">Please keep in mind that <strong>Titan works best with Administrator</strong> permissions to function.<br>
However this is not required. For those who do not want to give Titan Administrator, we've handpicked the permissions to give Titan for the best experience.</p>
<div class="row">
  <div class="col s12">
    <div id="invite-initial" class="card-panel indigo lighten-5 z-depth-3 hoverable">
      <span class="black-text center-align">
        <h3>Step 1</h3>
        <h5>Once you are ready to add the bot to your server, please hit the button below to start the process.</h5>
        <br>
        <a class="waves-effect waves-light btn btn-large center_content" id="invite-btn">Invite Titan!</a>
        <p>(Opens in a new window)</p>
      </span>
    </div>
    
    <div id="invite-waiting" class="card-panel indigo lighten-5 z-depth-3 hoverable" style="display: none;">
      <span class="black-text center-align">
        <h3>Step 2</h3>
        <h5>Please wait a moment while the bot tries to situate itself...</h5>
        <br>
        <div class="progress" style="background-color: #909cde;">
            <div class="indeterminate" style="background-color: #303f9f;"></div>
        </div>
      </span>
    </div>
    
    <div id="invite-waiting-fail" class="card-panel indigo lighten-5 z-depth-3 hoverable" style="display: none;">
      <span class="black-text center-align">
        <h3>Step 2</h3>
        <h5>Oops!</h5>
        <p class="flow-text">There seems to be a problem processing the invite.</p>
        <hr>
        <p>You may try adding the bot to the server again, or report the bug on our
        Discord server.</p>
        <div class="row">
          <div class="col s12 m3">
            <a class="waves-effect waves-light btn btn-large center_content" href="https://discord.io/titan" target="_blank">Report a bug</a>
          </div>
          <div class="col s12 m9">
            <a class="waves-effect waves-light btn btn-large center_content" href="./{{ guild_id }}">Try again</a>
          </div>
        </div>
      </span>
    </div>
    
    <div id="invite-done" class="card-panel indigo lighten-5 z-depth-3 hoverable" style="display: none;">
      <span class="black-text center-align">
        <h3>Step 3</h3>
        <h5>Congratulations! You have added Titan to your server!</h5>
        <p class="flow-text">You may start configuring your server to your likings.</p>
        <p>
        Keep in mind that if your server is large (500+ members<em>(?)</em> overall), it may
        take a while for the bot to index. Please allow five to ten minutes. If you are still
        unable to login to the embed with your Discord account, please talk to us and
        we'll sort this out right away!
        </p>
        <div class="row">
          <div class="col s12 m4">
            <a class="waves-effect waves-light btn btn-large center_content" href="https://discord.io/titan" target="_blank">Join our Discord server!</a>
          </div>
          <div class="col s12 m8">
            <a class="waves-effect waves-light btn btn-large center_content" href="{{url_for('user.administrate_guild', guild_id=guild_id)}}">Continue to configure your embed</a>
          </div>
        </div>
      </span>
    </div>
  </div>
</div>
{% endblock %}
{% block script %}
<script>
  const guild_id = "{{ guild_id }}";
  const guild_invite_url = "{{ guild_invite_url }}";
</script>

<script type="text/javascript" src="{{ url_for('static', filename='js/add-bot.js') }}"></script>
{% endblock %}