{% load i18n %}
{% load humanize %}
{% load waldur_core %}
{% load waldur_marketplace %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>{% trans "Marketplace Order Details" %}</title>
  <style>
    {% include "waldur_core/font.css" %}
    {% include "./style.css" %}
  </style>
</head>

<body>
<header class="clearfix">
  <div id="logo">
    {% if deployment_logo %}
      <img src="data:image/png;base64,{{ deployment_logo }}">
    {% endif %}
  </div>
  <div id="company">
    <h2 class="name">{{ deployment_name }}</h2>
    {% if deployment_address %}
      <div>{{ deployment_address }}</div>
    {% endif %}
    {% if deployment_phone %}
      <div>{{ deployment_phone }}</div>
    {% endif %}
    {% if deployment_email %}
      <div>{{ deployment_email }}</div>
    {% endif %}
  </div>
</header>
<main>
  <div id="details" class="clearfix">
    <div id="client">
      <div>
        <span>{% trans "Requested by" %}:</span>
        {{ order.created_by.full_name }}
        ({{ order.created_by.email }})
      </div>
      <div>
        <span>{% trans "Requested at" %}:</span>
        {{ order.created|date:"SHORT_DATE_FORMAT" }}
        {{ order.created|time:"H:i" }}
      </div>

      {% if order.approved_by %}
      <div>
        <span>{% trans "Approved by" %}:</span>
        {{ order.approved_by.full_name }}
        ({{ order.approved_by.email }})
      </div>
      {% endif %}
      {% if order.approved_at %}
      <div>
        <span>{% trans "Approved at" %}:</span>
        {{ order.approved_at|date:"SHORT_DATE_FORMAT" }}
        {{ order.approved_at|time:"H:i" }}
      </div>
      {% endif %}
    </div>
    <div id="invoice">
      <h1>{% trans "Marketplace order" %}</h1>
      <div class="date">
        UUID: {{ order.uuid|upper }}
      </div>
    </div>
  </div>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th class="no">#</th>
      <th class="desc">{% trans "DESCRIPTION" %}</th>
      <th class="unit">{% trans "PLAN" %}</th>
      <th class="total">{% trans "PRICE" %}</th>
    </tr>
    {% for item in order.items.all %}
    <tr>
      <td class="no">
        {{ forloop.counter }}
      </td>
      <td class="desc">
        <h3>
          {% if item.attributes.name %}
          {{ item.attributes.name }}
          {% elif item.offering.name %}
          {{ item.offering.name }}
          {% endif %}
        </h3>

        {% if item.attributes.description %}
        {{ item.attributes.description }}
        {% elif item.offering.description %}
        {{ item.offering.description }}
        {% endif %}
      </td>
      <td class="unit">
        {{ item.plan.name }}
      </td>
      <td class="total">
        {{ currency }} {{ item.cost | floatformat:2 | intcomma }}
      </td>
    </tr>
    {% endfor %}
    <tr class="foot">
      <td colspan="3">{% trans "TOTAL" %}</td>
      <td>{{ currency }} {{ order.total_cost | floatformat:2 | intcomma}}</td>
    </tr>
  </table>

  <h3>{% trans "Details of order items" %}</h3>
  {% for item in order.items.all %}
    <header class="clearfix">
      {{ forloop.counter }}.
      {% if item.attributes.name %}
        {{ item.attributes.name }}
      {% elif item.offering.name %}
        {{ item.offering.name }}
      {% endif %}
    </header>

    {% if item.attributes %}
      <p>{% trans "Offering request details" %}</p>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th class="no">#</th>
          <th class="desc">{% trans "NAME" %}</th>
          <th class="desc">{% trans "VALUE" %}</th>
        </tr>
        {% for key, value in item.safe_attributes.items|dictsort:"0.lower" %}
          <tr>
            <td class="no">{{ forloop.counter }}</td>
            <td class="desc">{{ key }}</td>
            <td class="desc">{{ value | pretty_json }}</td>
          </tr>
        {% endfor %}
      </table>
    {% endif %}

    {% if item.plan %}
      <p>{% trans "Billing plan components" %}</p>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th class="no">#</th>
          <th class="desc">{% trans "NAME" %}</th>
          <th class="desc">{% trans "TYPE" %}</th>
          <th class="unit">{% trans "AMOUNT" %}</th>
          <th class="total">{% trans "PRICE PER UNIT" %}</th>
        </tr>
        {% for component in item.plan.components.all %}
          <tr>
            <td class="no">{{ forloop.counter }}</td>
            <td class="desc">{{ component.component.name }}</td>
            <td class="desc">{{ component.component.get_billing_type_display }}</td>
            <td class="unit">{% get_invoice_item_component_amount item component %} {{ component.component.measured_unit }}</td>
            <td class="total">{{ currency }} {{ component.price | floatformat:4 | intcomma }}</td>
          </tr>
        {% endfor %}
        <tr class="foot">
          <td colspan="4">{% trans "TOTAL" %}</td>
          <td>{{ currency }} {{ item.cost | floatformat:2 | intcomma}}</td>
        </tr>
      </table>
    {% endif %}
  {% endfor %}
</main>
</body>
</html>
