<div class="card">
    <div class="card-body">
        <h4 class="card-title">{{ job_data.job_id }}</h4>
        <p class="card-text">{{ job_data.job_description }}</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">
            <span> created {{ job_data.job_created_time_humanize }} </span>
            <span> enqueued {{ job_data.job_enqueued_time_humanize }} </span>
            
        </li>
        {% if job_data.job_exc_info != "None" %}
            <li class="list-group-item">
                <div class="alert alert-danger mb-0" style="white-space: pre-wrap" role="alert">
                    {{ job_data.job_exc_info }}
                </div>
            </li>
        {% endif %}
    </ul>
    <div class="card-footer p-0 text-center d-flex justify-content-center">
        <div class="card-footer-item card-footer-item-bordered">
            <span class="border-right">on: <strong>{{ job_data.job_queue }}</strong> </span>
        </div>
        <div class="card-footer-item card-footer-item-bordered">
            <span class="border-right">status: <strong>{{ job_data.job_status }}</strong> </span>
        </div>
        <div class="card-footer-item card-footer-item-bordered">
            <span class="border-right">job_ttl: <strong>{{ job_data.job_ttl }} </strong></span>
        </div>
        <div class="card-footer-item card-footer-item-bordered">
            <span class="border-right">timeout: <strong>{{ job_data.job_timeout }}</strong> </span>
        </div>
        <div class="card-footer-item card-footer-item-bordered">
            <span class="border-right">fail_ttl: <strong>{{ job_data.job_fail_ttl }}</strong> </span>
        </div>
        <div class="card-footer-item card-footer-item-bordered">
            <span class="border-right">result_ttl: <strong>{{ job_data.job_result_ttl }}</strong> </span>
        </div>
    </div>
</div>