{% load helpers %}
{% load i18n %}
<div class="card" id="provider-server">
  <h2 class="card-header">{% trans "Provider" %}</h2>
  <table class="table table-hover attr-table">
    <tr>
      <th scope="row">{% trans "Provider" %}</th>
      <td>
        {% if provider_viewable %}
          <a href="{{ provider.get_absolute_url }}">{{ provider.name }}</a>
        {% else %}
          {{ provider.name }}
        {% endif %}
      </td>
    </tr>
    <tr>
      <th scope="row">{% trans "Server ID" %}</th>
      <td class="font-monospace">{{ provider_server.external_id|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "State" %}</th>
      <td>{% badge provider_server.get_state_display bg_color=server_state_color %}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Provider status" %}</th>
      <td>{{ server_status|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Power" %}</th>
      <td id="provider-server-power">
        {% if power_job %}
          {{ power_text }}
          <a href="{{ power_job.get_absolute_url }}">#{{ power_job.pk }}</a>
          {% badge power_job.get_status_display bg_color=power_job_color %}
        {% else %}
          {{ power_text|placeholder }}
        {% endif %}
      </td>
    </tr>
    <tr>
      <th scope="row">{% trans "Location" %}</th>
      <td class="font-monospace">{{ provider_server.location|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Server type" %}</th>
      <td>{{ server_type|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Image" %}</th>
      <td id="provider-server-image">{{ server_image|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Labels" %}</th>
      <td>
        {% for label in server_labels %}
          {% if label.url %}
            <a href="{{ label.url }}" class="badge text-bg-primary text-wrap text-break"{% if label.title %} title="{{ label.title }}"{% endif %}>{{ label.text }}</a>
          {% else %}
            <span class="badge text-bg-secondary text-wrap text-break"{% if label.title %} title="{{ label.title }}"{% endif %}>{{ label.text }}</span>
          {% endif %}
        {% empty %}
          {{ None|placeholder }}
        {% endfor %}
      </td>
    </tr>
    <tr>
      <th scope="row">{% trans "Last synced" %}</th>
      <td>{{ provider_server.last_synced|isodatetime|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Latest job" %}</th>
      <td>
        {% if latest_job %}
          <a href="{{ latest_job.get_absolute_url }}">#{{ latest_job.pk }}</a>
          {{ latest_job.name }}
          {% badge latest_job.get_status_display bg_color=latest_job_color %}
          <span class="text-muted">{{ latest_job.created|isodatetime }}</span>
        {% else %}
          {{ None|placeholder }}
        {% endif %}
      </td>
    </tr>
  </table>
</div>