<div id="profile-header">
    <div class="profile-image-container" style="background-image : url('{{avatar.large}}')"></div>
    <h3>
        {{name}}
    </h3>

    <div id="profile-stats">
        {{#if location}}
            <span class="stat">
                <a href="http://maps.google.com/maps?q={{location}}" target="_blank">
                    <i class="icon-map-marker icon-white"></i>
                </a>
                {{location}}
            </span>
            <span class="divider">•</span>
        {{/if}}

        {{#if birthday}}
            <span class="stat">
                <img src='{{imageUrl "buttons/bday@2x-white.png"}}' class="cake" />
                {{birthday}}
            </span>
            <span class="divider">•</span>
        {{/if}}

        <span class="stat services">
            <a href="https://facebook.com" class="service" target="_blank">
                <img src='{{imageUrl "buttons/service-icons/fb@2x-white.png"}}' />
            </a>
            <a href="https://twitter.com" class="service" target="_blank">
                <img src='{{imageUrl "buttons/service-icons/twitter@2x-white.png"}}' />
            </a>
            <a href="https://tumblr.com" class="service" target="_blank">
                <img src='{{imageUrl "buttons/service-icons/tumblr@2x-white.png"}}' />
            </a>
        </span>

        {{#if is_own_profile}}
            <span class="edit-control">
                <span class="divider">•</span>
                    <a href="/profile/edit" title="Edit Profile" rel="tooltip" style="margin-left:2px;">
                        <i class="icon-cog icon-white"></i>
                    </a>
                </span>
            </span>
        {{/if}}
    </div>

    <div id="profile-bio">
        <p>
            {{bio}}
        </p>
    </div>
</div>

