{% extends 'site_layout.html.j2' %}
{% set title="Dashboard" %}

{% block content %}
<h1>User Dashboard</h1>
<p class="flow-text">Select a server to configure Titan Embeds.</p>
<p>*List missing some servers? It's because you must have either <strong>Manage Server</strong>, <strong>Kick Members</strong>, or <strong>Ban Members</strong> permissions to modify embed settings.</p>
<div class="row">
  {% for server in servers %}
  <div class="col l4 m6 s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable">
      <div class="row valign-wrapper">
        <div class="col s3">
          {% if server.icon %}
          <img src="{{ icon_generate(server.id, server.icon) }}" alt="" class="circle responsive-img">
          {% else %}
          <span class="black-text">No icon :(</span>
          {% endif %}
        </div>
        <div class="col s7">
          <span class="black-text">
            <p class="flow-text truncate">{{ server.name }}</p>
            <br>
            <a class="waves-effect waves-light btn" href="{{url_for('user.administrate_guild', guild_id=server['id'])}}">Modify</a>
          </span>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<hr>

{% if cosmetics is none %}
<div class="row">
  <div class="col s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
      <h4>Cosmetics!</h4>
      <p class="flow-text">Would you like to have <strong>cosmetics</strong> such as <em>custom CSS</em> for your embed?</p>
      <a class="waves-effect waves-light btn" href="https://discord.io/Titan">Talk to us!</a>
    </div>
  </div>
</div>
{% endif %}

{% if css_list is not none %}
<p class="flow-text">
  Create or modify your user defined CSS.
  <a class="waves-effect waves-light btn" href="{{ url_for("user.new_custom_css_get") }}">New</a>
</p>
<p>You have used <strong>{{ premium_css_count }} out of {{ cosmetics.css_limit }}</strong> custom css slots. {% if premium_css_count >= cosmetics.css_limit %}<strong>Don't fret! You can still use CSS variables.</strong>{% endif %} Donate below to obtain more slots!</p>
{% if premium_css_count >= cosmetics.css_limit %}<p>Free up some slots by emptying your other custom CSS field and submitting it (Titan will automatically mark empty custom css editor fields as unused slots in the database) or delete the user defined css slot altogether.</p>{% endif %}
<div class="row">
  {% for css in css_list %}
  <div class="col l4 m6 s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
      <p class="flow-text truncate"><code>#{{ css.id }}</code> {{ css.name }}</p>
      <a class="waves-effect waves-light btn" href="{{ url_for("user.edit_custom_css_get", css_id=css.id) }}">Modify</a>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

<hr>

<div class="row">
  <div class="col s12">
    <div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
      <h4>Donations!</h4>
      <p class="flow-text">Would you like to support the Titan Embeds project?</p>
      <p>You currently have <strong>{{ session["tokens"] }}</strong> Titan Tokens.</p>
      <a class="waves-effect waves-light btn" href="{{ url_for('user.donate_get') }}">Donate!!</a>
    </div>
  </div>
</div>
{% endblock %}