{% set library = package('library').getPackageProperties(library_name,true) %}
{% set params = getOption('library.params',null) %}
{% set library_params = (params[library_name] is empty) ? library.params : params[library_name] %}
<div class="ui stackable internally celled grid">
    <div class="row">
        <div class="ui four wide column">
            <div class="ui header">
                <i class="left floated rounded big bordered cube blue icon"></i>  
                <div class="content">
                    {{ library.title|default(library.name) }} 
                    <div class="ui basic mini label">
                        {{ labels.version }}
                        <div class="detail">
                            {{ library.version }}
                        </div>
                    </div>
                    <div class="sub header">{{ library.description }}</div>    
                    {% if library.framework == true %}                              
                    <div class="ui mini basic blue label">
                        {{ labels.framework }}
                        {% if current_framework == library.name %}                        
                            <span class="text-gray-800">{{ labels.current }}</span>                        
                        {% endif %}
                    </div>              
                    {% endif %}   
                    {% if library.async == true %}
                    <div class="ui basic horizontal blue label">Async</div>
                    {% endif %}
                    {% if library.crossorigin is not empty %}
                    <div class="ui basic blue horizontal label">
                        <span class="text-gray-900">
                            {{ labels.crossorigin }}
                        </span>    
                        {{ library.crossorigin }}
                    </div>
                    {% endif %}
                </div>    
            </div>
        </div>
        <div class="ui four wide column">
            {{ component('system:admin.packages.repository',{ type: 'library', name: library.name }) }}
        </div>
    </div>
</div>
<div class="ui stackable top attached tabular menu" id="library_details_tab">
    <a class="item active" data-tab="params_tab">
        <i class="icon blue cogs"></i>
        {{ labels.params }}
    </a> 
    <a class="item" data-tab="files_tab">
        <i class="icon blue outline file"></i>
        {{ labels.files }}
    </a>     
</div>
<div class="ui bottom attached tab segment active" data-tab="params_tab">
    <div class="ui grid">
        <div class="four wide column">
            {% if library.get('params-readonly',false) != true %}
                {{  component('system:admin.libraries.library.params.form',{ 
                        library: library_name, 
                        params: library_params,
                        show_label: true, 
                        show_value: true 
                    }) 
                }}
            {% else %}
                {{ component('system:admin.libraries.library.params',{ library: library_name, params: library_params }) }}
            {% endif %}
        </div>
    </div>    
</div>
<div class="ui bottom attached tab segment" data-tab="files_tab">
    {{ component('system:admin.libraries.library.files',{ files: library.files }) }}
</div>