<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
  <head>
    <!--Import Google Icon Font-->
    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" integrity="sha256-6DQKO56c9MZL0LAc7QNtxqJyqSa3rS9Gq5FVcIhtA+w=" crossorigin="anonymous" media="screen,projection"/>
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embedstyle.css') }}">
    <link id="css-theme" type="text/css" rel="stylesheet" href="">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    {% include 'seo_meta.html.j2' %}
    {% with title="Visit " + guild['name'] + " embed", description="Visit " + guild['name'] + " on Titan Embeds and chat with your friends from the comfort of your own website. This page is 100% embeddable, iFrameable and looks good on any webpages. Titan is hassle free and designed as easy to setup!", image=generate_guild_icon( guild['id'], guild['icon']) %}
      {% include "opengraph_tags.html.j2" %}
    {% endwith %}

    <title>{{ guild['name'] }} - Embed - Titan Embeds for Discord</title>
    {% include 'google_analytics.html.j2' %}
    
    {% if css is not none %}
    <style id="user-defined-css">{{ css.css }}</style>
    {% endif %}
  </head>
  <body>
    {% include 'nobot_header.html.j2' %}
    <div class="navbar-fixed">
      <nav>
        <div class="nav-wrapper">
          <a href="#" data-activates="guild-nav" class="button-collapse" id="guild-btn"><i class="material-icons">menu</i></a>
          <div class="container">
            <a href="{{ url_for("index") }}" target="_blank" class="brand-logo"><img src="{{ url_for('static', filename='img/titanembeds_shield.png') }}" /><strong class="align-top">Titan</strong><span class="align-top">Embeds</span> <span class="betatag align-top">BETA</span></a>
          </div>
          <a href="#" data-activates="members-nav" class="button-collapse right" id="members-btn"><i class="material-icons">person</i></a>
        </div>
      </nav>
    </div>
    <main>
      <div id="chatcontent" class="chatcontent"></div>
    </main>

      <ul id="guild-nav" class="side-nav">
        <li>
          <div class="userView">
            {% if guild['icon'] %}
            <img class="circle" src="{{ generate_guild_icon( guild['id'], guild['icon']  ) }}">
            {% endif %}
            <span class="name">{{ guild['name']|e }}</span>
          </div>
        </li>

        <li><a class="subheader">Actions</a></li>
        <li><a href="{{ url_for("user.administrate_guild", guild_id=guild['id']) }}" class="waves-effect" target="_blank" id="administrate_link" style="display: none;">Manage Guild Embed</a></li>
        <li><a id="instant-inv" href="#" class="waves-effect" target="_blank">Open Server on Discordapp</a></li>

        <li><div class="divider"></div></li>

        <li><a class="subheader">Channel Topic</a></li>
        <div id="channeltopic"></div>

        <li><div class="divider"></div></li>

        <li><a class="subheader">Channels</a></li>
        <span id="channels-list"></span>
      </ul>

      <ul id="members-nav" class="side-nav">
        <li><a class="subheader">Online Server Members - <span id="discord-members-count"></span></a></li>
        <span id="discord-members"></span>

        <li><div class="divider"></div></li>

        <li><a class="subheader">Authenticated Embed Users - <span id="embed-discord-members-count"></span></a></li>
        <span id="embed-discord-members"></span>

        <li><a class="subheader">Guest Embed Users - <span id="guest-members-count"></span></a></li>
        <span id="embed-unauth-users"></span>
      </ul>

      <div id="loginmodal" class="modal">
        <div class="modal-content">
          {% include 'nobot_header.html.j2' %}
          <h4>{{ login_greeting }}</h4>
          <div id="loginmodal-maincontent" class="row valign-wrap">
            <div id="modal_guildinfobox" class="col m3 s12 center-align">
              {% if guild['icon'] %}
              <img id="modal_guildiconcircle" class="circle" src="{{ generate_guild_icon( guild['id'], guild['icon']  ) }}">
              {% endif %}
              <p id="modal_guildname"><strong>{{ guild['name']|e }}</strong></p>
              {% if guild["discordio"] %}
              <a id="modal_invite_btn_discordio" class="waves-effect waves-light btn" target="_blank" href="http://discord.io/{{ guild["discordio"]|e }}">discord.io/{{ guild["discordio"]|e }}</a>
              {% else %}
              <a id="modal_invite_btn" class="waves-effect waves-light btn" target="_blank">discord.gg</a>
              {% endif %}
            </div>
            <div class="col m9 s12">
              <p class="flow-text">Please choose one of the following methods to authenticate!</p>
              <div class="progress" id="loginProgress" style="display: none;">
                  <div class="indeterminate"></div>
              </div>
              <div class="row">
                <div class="col s12 l4">
                  <a id="discordlogin_btn" href="{{ url_for("embed.login_discord", _external=True) }}" class="waves-effect waves-light btn-large" target="_blank">Discord Login</a>
                  <p>*You will be invited into this server.</p>
                </div>
                {% if unauth_enabled %}
                <div class="col s12 l8">
                  <p>Of course, you also have the option to login by picking a temporary username for your current browsing session.</p>
                  <input id="custom_username_field" type="text" {% if session.unauthenticated and session.username %}value="{{ session['username'] }}"{% endif %}>
                  <label class="active" for="custom_username_field">Username (Hit ENTER/RETURN key to confirm)</label>
                </div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    
    <div id="focusmodal" class="modal">
      <div class="modal-content">
        <h4>This embed is currently unfocused.</h4>
        <p class="flow-text">Please click this part of the page to initialize the embed.</p>
      </div>
    </div>
    
    <div id="userembedmodal" class="modal">
      <div class="modal-content">
        <h4>Theme</h4>
        <div class="row">
          <div class="input-field col s12">
            <select id="theme-selector">
              <option value="" selected>Default</option>
              <option value="DiscordDark">DiscordDark</option>
              <option value="BetterTitan">BetterTitan</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <footer id="footer" class="footer">
      <div id="fetching-indicator" class="preloader-wrapper small active" style="display: none;">
        <div class="spinner-layer spinner-blue-only">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div><div class="gap-patch">
            <div class="circle"></div>
          </div><div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>
      </div>
      <div id="footercontainer" class="footercontainer">
        <div class="currentuserchip left" id="nameplate">
          <div class="left"><img id="currentuserimage" src="" class="circle left currentuserimage" style="display: none;"></div>
          <div id="currentusername" class="currentusername left"><span id="curuser_name">Titan</span><span id="curuser_discrim">#0001</span></div>
        </div>
        <div id="messageboxouter" class="input-field inline">
          <textarea placeholder="Enter message" id="messagebox" type="text" class="materialize-textarea" rows="1"></textarea>
          <span id="visitor_mode_message" style="display:none;">Please login to post a message. <a id="visitor_login_btn" class="waves-effect waves-light btn">Login</a></span>
        </div>
      </div>
    </footer>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js" integrity="sha256-ToPQhpo/E89yaCd7+V8LUCjobNRkjilRXfho6x3twLU=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js" integrity="sha256-iaqfO5ue0VbSGcEiQn+OeXxnxAMK2+QgHXIDA5bWtGI=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.4/linkify.min.js" integrity="sha256-/qh8j6L0/OTx+7iY8BAeLirxCDBsu3P15Ci5bo7BJaU=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.4/linkify-jquery.min.js" integrity="sha256-BlSfVPlZijMLojgte2AtSget879chk1+8Z8bEH/L4Cs=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cheet.js/0.3.3/cheet.min.js" integrity="sha256-FxQrnIC3BX45JRzOyFUlKiM6dY3A/ZakV6w4WpYyfyA=" crossorigin="anonymous"></script>

    {% raw %}
    <script id="mustache_channellistings" type="text/template">
      <li><a class="waves-effect truncate" id="channel-{{channelid}}"><span class="channel-hash">#</span> {{channelname}}</a></li>
    </script>

    <script id="mustache_authedusers" type="text/template">
      <li><a class="waves-effect truncate" id="discorduser-{{id}}"><img class="circle membercircle" src="{{avatar}}"> <span class="membername">{{username}}</span></a></li>
    </script>

    <script id="mustache_unauthedusers" type="text/template">
      <li><a class="waves-effect truncate"><span class="membername">{{username}}#{{discriminator}}</span></a></li>
    </script>

    <script id="mustache_usermessage" type="text/template">
      <p><span class="chatusername">{{username}}#{{discriminator}}</span> <span id="discordmessage_{{id}}" title="{{full_timestamp}}" class="chattimestamp">{{time}}</span> <span class="chatmessage">{{{content}}}</span></p>
    </script>

    <script id="mustache_memberrole" type="text/template">
      <li><a class="subheader role-title">{{name}}</a></li>
    </script>

    <script id="mustache_message_emoji" type="text/template">
      <img class="message_emoji tooltipped" src='https://cdn.discordapp.com/emojis/{{id}}.png' data-position="top" data-delay="200" data-tooltip=":{{name}}:" />
    </script>
    {% endraw %}

    <script>
        const guild_id = "{{ guild_id }}";
        const bot_client_id = "{{ client_id }}";
        const visitors_enabled = {% if visitors_enabled %}true{% else %}false{% endif %};
    </script>

    <script type="text/javascript" src="{{ url_for('static', filename='js/embed.js') }}"></script>
  </body>
</html>
