{% macro field(name, 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 profile[name] %}
        {% with field = profile[name]|first %}
            <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 %}
        {% endwith %}
        {% endif %}
    </div>
</div>
{%- 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 %}

{% macro avatarfield(name, width=4) -%}
<div class="col-md-{{width}}" style="margin-bottom: 20px;">
    <div style="background-color: #eee; padding: 10px 30px; border-radius: 12px; display: flex; flex-direction: row; gap: 20px">
        <div>
            <img src="/avatar/user/{{ profile.uid[0] }}" style="width: 70px; height: 70px; margin: 10px 0" />
        </div>
        <div>
            <h4>{{ name|readable }}</h4>
            {% set field = profile[name]|first %}
            {% if field and (field.value | length) %}
                {% if name in can_delete %}
                <a class="modalLink" href="/vcard/delete/{{ field.uid }}"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span> Remove</a>
                {% endif %}
            {% else %}
                <a class="modalLink" href="/vcard/add/{{ name }}"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Upload</a>
            {% endif %}
        </div>
    </div>
</div>
{%- endmacro %}


{% extends 'basic.html' %}
{% block content %}
<div class="row">
  {{ avatarfield('jpegphoto') }}
  {{ field('givenname') }}
  {{ field('surname') }}
  {{ field('gecos', width=8) }}
  {{ field('loginshell') }}
  {{ field('commonname', width=8) }}
  {{ multifield('telephonenumber') }}
  {{ multifield('mobiletelephonenumber') }}
  {{ multifield('mailroutingaddress', width=8) }}
  {{ 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 %}
