{% extends "musician/base.html" %}
{% load i18n %}

{% block content %}

<h2>{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
{% if profile.last_login %}
<p>{% blocktrans with last_login=profile.last_login|date:"SHORT_DATE_FORMAT" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>
{% else %}
<p>{% trans "It's the first time you log into the system, welcome on board!" %}</p>
{% endif %}

<div class="card-deck">
  {% for resource, usage in resource_usage.items %}
  <div class="card resource-usage resource-{{ resource }}">
    <div class="card-body">
      <h5 class="card-title">{{ usage.verbose_name }}</h5>
      {% include "musician/components/usage_progress_bar.html" with detail=usage %}
    </div>
  </div>
  {% endfor %}
  <div class="card resource-usage resource-notifications">
    <div class="card-body">
      <h5 class="card-title">{% trans "Notifications" %}</h5>
      {% for message in notifications %}
      <p class="card-text">{{ message }}</p>
      {% empty %}
      <p class="card-text">{% trans "There is no notifications at this time." %}</p>
      {% endfor %}
    </div>
  </div>
</div>


<h1 class="service-name">{% trans "Your domains and websites" %}</h1>
<p class="service-description">{% trans "Dashboard page description." %}</p>

{% for domain in domains %}
<div class="card service-card">
  <div class="card-header">
    <div class="row">
      <div class="col-md">
        <strong>{{ domain.name }}</strong>
      </div>
      <div class="col-md-8">
        {% with domain.websites.0 as website %}
        {% with website.contents.0 as content %}
        <button type="button" class="btn text-secondary" data-toggle="modal" data-target="#configDetailsModal"
          data-domain="{{ domain.name }}" data-website="{{ website|yesno:'true,false' }}" data-webapp-type="{{ content.webapp.type }}" data-root-path="{{ content.path }}"
          data-url="{% url 'musician:domain-detail' domain.id %}">
            {% trans "view configuration" %} <strong class="fas fa-tools"></strong>
        </button>
        {% endwith %}
        {% endwith %}
      </div>
      <div class="col-md text-right">
        {% comment "@slamora: orchestra doesn't have this information [won't fix] See issue #2" %}
          {% trans "Expiration date" %}: <strong>{{ domain.expiration_date|date:"SHORT_DATE_FORMAT" }}</strong>
        {% endcomment %}
      </div>
    </div>
  </div><!-- /card-header-->
  <div class="card-body row text-center">
      <div class="col-md-2 border-right">
          <h4>{% trans "Mail" %}</h4>
          <p class="card-text"><i class="fas fa-envelope fa-3x"></i></p>
          <p class="card-text text-dark">
            {{ domain.mails|length }} {% trans "mail addresses created" %}
            {% if domain.addresses_left.alert_level %}
            <br/>
            <span class="text-{{ domain.addresses_left.alert_level }}">{{ domain.addresses_left.count }} {% trans "mail address left" %}</span>
            {% endif %}
          </p>
          <a class="stretched-link" href="{% url 'musician:mails' %}?domain={{ domain.id }}"></a>
      </div>
      <div class="col-md-2 border-right">
          <h4>{% trans "Mail list" %}</h4>
          <p class="card-text"><i class="fas fa-mail-bulk fa-3x"></i></p>
          <a class="stretched-link" href="{% url 'musician:mailing-lists' %}?domain={{ domain.id }}"></a>
      </div>
      <div class="col-md-2 border-right">
          <h4>{% trans "Software as a Service" %}</h4>
          <p class="card-text"><i class="fas fa-fire fa-3x"></i></p>
          <p class="card-text text-dark">{% trans "Nothing installed" %}</p>
          <a class="stretched-link" href="{% url 'musician:saas' %}?domain={{ domain.id }}"></a>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-4">
          <h4>{% trans "Disk usage" %}</h4>
          <p class="card-text"><i class="fas fa-hdd fa-3x"></i></p>
          <div class="w-75 m-auto">
          {% include "musician/components/usage_progress_bar.html" with detail=domain.usage %}
          </div>
      </div>
      <div class="col-md-1"></div>
  </div>
</div>

{% endfor %}

<!-- configuration details modal -->
<div class="modal fade" id="configDetailsModal" tabindex="-1" role="dialog" aria-labelledby="configDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-secondary" id="configDetailsModalLabel">{% trans "Configuration details" %}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="domain-ftp pb-3 border-bottom">
            <h6 class="pl-4 mb-4">{% trans "FTP access:" %}</h6>
            {# Translators: domain configuration detail modal #}
            <p>{% trans "Contact with the support team to get details concerning FTP access." %}</p>
            {% comment %}
            <!-- hidden until API provides FTP information -->
            <label>{% trans "Username" %}:</label> <span id="config-username" class="font-weight-bold">username</span><br/>
            <label>{% trans "Password:" %}</label> <span id="config-password" class="font-weight-bold">password</span>
            {% endcomment %}
          </div>
          <div class="domain-website pt-4">
            <div id="no-website"><h6 class="pl-4">{% trans "No website configured." %}</h6></div>
            <div id="config-website">
              <label>{% trans "Root directory:" %}</label> <span id="config-root-path" class="font-weight-bold">root directory</span>
              <label>{% trans "Type:" %}</label><span id="config-webapp-type" class="font-weight-bold">type</span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="#domain-detail" class="btn btn-primary">{% trans "View DNS records" %}</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block extrascript %}
<script>
$('#configDetailsModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var modal = $(this);

  // Extract info from data-* attributes
  modal.find('.modal-title').text(button.data('domain'));
  modal.find('.modal-body #config-webapp-type').text(button.data('webapp-type'));
  modal.find('.modal-body #config-root-path').text(button.data('root-path'));
  modal.find('.modal-footer .btn').attr('href', button.data('url'));

  var nowebsite = modal.find('.modal-body #no-website');
  var websitecfg = modal.find('.modal-body #config-website');
  if(button.data('website')) {
    nowebsite.hide();
    websitecfg.show();
  } else {
    nowebsite.show();
    websitecfg.hide();
  }
})
</script>
{% endblock %}