h0v1n8-web/website/rotbot/templates/rotbot/network.html

{% extends "base.html" %}
{% block content %}
  <div class="ui three inverted grey statistics">
    <div class="statistic">
      <div class="value">
        <i class="server icon"></i>
        {{ total_hosts }}
      </div>
      <div class="label">
        Hosts
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="hashtag icon"></i>
        {{ total_chanels }}
      </div>
      <div class="label">
        Channels
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="users icon"></i>
        {{ total_users }}
      </div>
      <div class="label">
        Users
      </div>
    </div>
  </div>
  <div class="ui five tiny inverted grey statistics">
    <div class="statistic">
      <div class="value">
        <i class="comments icon"></i>
        {{ total_messages }}
      </div>
      <div class="label">
        Messages
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="theater masks icon"></i>
        {{ total_actions }}
      </div>
      <div class="label">
        Actions
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="bullhorn icon"></i>
        {{ total_notices }}
      </div>
      <div class="label">
        Notices
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="user plus icon"></i>
        {{ total_joins }}
      </div>
      <div class="label">
        Joins
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="user slash icon"></i>
        {{ total_kicks }}
      </div>
      <div class="label">
        Kicks
      </div>
    </div>
  </div>
  <div class="ui six tiny inverted grey statistics">
    <div class="statistic">
      <div class="value">
        <i class="thermometer half alternate icon"></i>
        {{ total_level }}
      </div>
      <div class="label">
        Level
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="tachometer alternate icon"></i>
          <i class="inverted seedling corner icon"></i>
        </i>
        {{ total_xp_spent }}
      </div>
      <div class="label">
        XP spent
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="gas pump icon"></i>
          <i class="inverted seedling corner icon"></i>
        </i>
        {{ total_ap_spent }}
      </div>
      <div class="label">
        AP spent
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="coins icon"></i>
        {{ total_coin }}
      </div>
      <div class="label">
        Coin
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="coins icon"></i>
          <i class="inverted corner shopping cart icon"></i>
        </i>
        {{ total_coin_spent }}
      </div>
      <div class="label">
        Coin spent
      </div>
    </div>
    <div class="statistic">
      <div class="value">
        <i class="icons">
          <i class="coins icon"></i>
          <i class="inverted corner gift icon"></i>
        </i>
        {{ total_coin_given }}
      </div>
      <div class="label">
        Coin given
      </div>
    </div>
  </div>

  <div class="ui inverted card">
    <div class="content">
      <div class="header" title="Network">
        <i class="sitemap icon"></i>
        {{ network.name }}
        {% if network.enabled %}
          <i class="power off icon" title="Enabled"></i>
        {% else %}
          <i class="minus circle" title="Disabled"></i>
        {% endif %}
      </div>
      <div class="ui list">
        {% for host in hosts %}
          <div class="item" title="Server">
            <i class="server icon"></i>
            <div class="content">
              {{ host }}
              {% if host.ssl %}
                <i class="green lock icon" title="Encrypted connection"></i>
              {% endif %}
              <span class="right floated">
                <i class="ethernet icon"></i>
                <span class="ui inverted green text">{{ host.connection_succeeds }}</span>
                <span class="ui inverted red text">{{ host.connection_fails }}</span>
              </span>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="extra content">
      <div class="ui list">
        <div class="item" title="Home channel">
          <i class="hashtag icon"></i>
          <div class="content">
              {{ network.home_channel }}
          </div>
        </div>
        <div class="item" title="Nickname">
          <i class="id badge icon"></i>
          <div class="content">
            {{ network.nickname }}
            {% if network.password %}
              <i class="green user lock icon" title="NickServ password saved"></i>
            {% endif %}
          </div>
        </div>
        <div class="item" title="Username">
          <i class="id card icon"></i>
          <div class="content">
            {{ network.username }}
          </div>
        </div>
      </div>
    </div>
    {% if perms.rotbot.change_network %}
      <div class="ui top right attached black label">
        <a href="{% url 'rotbot:edit_network' network_slug=network.slug %}" class="ui inverted button">Edit</a>
      </div>
    {% endif %}
    <div class="ui inverted bottom right attached basic label">
      <div class="ui inverted divided horizontal list">
          <div class="item" title="Command character">
              <i class="terminal icon"></i>
              {{ network.command_character }}
          </div>
          <div class="item" title="Help character">
              <i class="help icon"></i>
              {{ network.help_character }}
          </div>
      </div>
    </div>
  </div>
  {% if channels %}
    <div class="ui inverted relaxed divided selection list">
      {% for channel in channels %}
        <div class="item" onclick="location.href='{% url 'rotbot:channel' channel.slug %}';">
          <a class ="header" href="{% url 'rotbot:channel' channel.slug %}">{{ channel.name }}</a>
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endblock content %}





<section class="ui stackable cards">
    <figure class="PhotoCard ui card">
        <img src="http://via.placeholder.com/300x250" class="ui fluid image">
        <figcaption class="content">
            Cool pics
        </figcaption>
    </figure>
</section>
<script>
    function deleteModal() {
        $('.ui.basic.modal').each(function() {
            $(this).remove();
        });
    }
    $('.PhotoCard').click(function() {
        // Delete any modals hanging around
        deleteModal();
        var image = $(this).children('img').attr('src');
        $('body').append('<div class="ui basic modal"><div class="content"><img src="'+image+'" width="100%" /></div></div>');
        $('.ui.basic.modal')
            .modal('show');
    })
</script>