{% for person in results %}
<style>
    .image{{loop.index}} {
        background: url("https://image.tmdb.org/t/p/h632/{{person.metadata.profile_path}}");
        background-size: cover;
        }
</style>
<div class="col">
    <a href="https://www.themoviedb.org/person/{{person.metadata.id}}" style="color: inherit;">
        <div class="movie-card">
            <div class="movie-header image{{loop.index}}">
                <!-- <div class="header-icon-container">
                    <a href="#">
                        <i class="material-icons header-icon"></i>
                    </a>
                </div> -->
            </div>
            <!--movie-header-->
            <div class="movie-content">
                <div class="movie-content-header">
                    <h3 class="movie-title">{{person.metadata.name}}</h3>
                </div>
                <div class="movie-info">
                    <div class="info-section">
                        <label style="font-size:8.0pt">Date of Birth</label>
                        <span style="font-size:8.0pt">{{person.metadata.birthday}}</span>
                    </div>
                    <!--date,time-->
                    <div class="info-section">
                        <label style="font-size:8.0pt">Similarity</label>
                        <span style="font-size:8.0pt">{{person.score|round(2)}}</span>
                    </div>
                    <!--screen-->
                    <div class="info-section">
                        <label style="font-size:8.0pt">Popularity</label>
                        <span style="font-size:8.0pt">{{person.metadata.popularity|round(2)}}</span>
                    </div>
                    <!--seat-->
                </div>
            </div>
            <!--movie-content-->
        </div>
    </a>
</div>
{% endfor %}