{% macro field(name, width=4) -%}
{% if profile[name] %}
{% with field = profile[name]|first %}
<div class="col-md-{{width}}" style="margin-bottom: 20px;">
    <div style="background-color: #eee; padding: 10px 30px; border-radius: 12px;">
    <h4>{{ name|readable }}</h4>
    <h2 style="margin-top: 0">{{ field }}</h2>
    {% if field.name in can_delete %}delete{% endif %}
    {% if name in can_modify %}
    <a class="modalLink" href="/vcard/modify/{{ field.uid }}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a>
    {% endif %}
    </div>
</div>
{% endwith %}
{% else %}
<div class="col-md-6">
    {{ name|readable }}
</div>
{% endif %}
{%- endmacro %}

{% macro multifield(name, code=False, width=4) -%}
<div class="col-md-{{width}}" style="margin-bottom: 20px;">
    <div style="background-color: #eee; padding: 10px 30px; border-radius: 12px;">
        <h4>{{ name|readable }}</h4>
        {% if name in can_add %}
        <a class="modalLink" href="/vcard/add/{{ name }}"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add</a>
        {% endif %}
        {% for value in profile[name] %}
	{% if code %}
	<code style="display: block; word-wrap: break-word; margin-top: 1em; margin-bottom: 0.5em; padding: 0.8em; background-color: #111; color: #fff;">{{ value }}</code>
	{% else %}
        <h2>{{ value }}</h2>
	{% endif %}
        {% if name in can_delete %}
        <a class="modalLink" href="/vcard/delete/{{ value.uid }}"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span> Remove</a>
        {% endif %}
        {% if name in can_modify %}
        <a class="modalLink" href="/vcard/modify/{{ value.uid }}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a>
        {% endif %}
        {% endfor %}
    </div>
</div>
{%- endmacro %}


{% extends 'basic.html' %}
{% block content %}
<div class="row">
  {{ field('givenname') }}
  {{ field('gecos', width=8) }}
  {{ field('surname') }}
  {{ field('commonname', width=8) }}
  {{ field('loginshell') }}
  {{ multifield('telephonenumber') }}
  {{ multifield('mobiletelephonenumber') }}
  {{ multifield('sshpublickey', code=True, width=12) }}
  {{ multifield('mifareidhash', code=True, width=12) }}
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    $(".modalLink").click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $.get(url, function(data) {
            $(data).modal('show');
        });
    });
});
</script>
{% endblock %}
