{{#Name=Media}}
{{#Description=Standard card for displaying a Media device}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#CanBeDeleted=False}}
{{#InternalType=Media}}
{{#SaveList=}}

{{if w==null}}
{{widget_id=queries['widget_id']}}
{{w=widget_by_id widget_id}}
{{end}}
{{num_widgets = widget_count w.id}}
{{d=device_by_ref w.device_ref}}
{{dbs=dashboards_ref}}
{{if d}}
<style>
.media_children_icon {
    font-size: 12px;
    //overflow-x: auto;
    overflow: hidden;
    white-space: nowrap;
}
.card_media_location_text{{w.id}} {
    font-size: {{w.location_size}}px;
    color: {{w.location_color}};
}
.card_media_name_text{{w.id}} {
    font-size: {{w.name_size}}px;
    font-weight: bold;
    color: {{w.name_color}};
}
.card_media_status_text{{w.id}} {
    font-size: {{w.status_size}}px;
    color: {{w.status_color}};
}
</style>
<div class="p-2">
{{if w.device_ref==""}}
<b>Edit to select a media device</b>
{{else}}
<form id='controldevice_{{d.ref}}'>
    {{if w.show_feature_bar}}
    <div class="row pb-1 no-gutters">
        <div {{if (array.size d.children)>0}} onclick="show_children({{ d.primary_ref }})" {{end}} data-toggle="modal" data-target="#childcontrol" class="fa-point text-right col mr-2 media_children_icon d-xl-inline-block float-xl-none border border-top-0 border-right-0 border-left-0 pb-1">
            {{ for c in d.children }} 
                {{if c.device_sub_type==14 || c.device_sub_type==1 || c.device_sub_type==3 || c.device_sub_type==4 || c.device_sub_type==13 }}
                {{else}}
                <span id='stchim_{{c.ref}}'>
                    <img src='{{status_image_file c.ref}}' width='24' height='24' data-toggle='tooltip' data-placement='top' title='{{c.name}}: {{status_text_no_html c.ref}}'>
                    {{ if c.status_suffix=='%' || c.status_suffix=='@S@' }}
                    {{ status_text_no_html c.ref }}
                    {{ end }}
                </span>
                {{end}}                
            {{ end }}
            {{ if d.child_count == 0 }}
            <img src="/images/HomeSeer/status/transparent.png" width="24" height="24">
            {{ end }}
        </div>
    </div>
    {{end}}
    <div class="row ml-1 pb-1 no-gutters card_media_location_text{{w.id}} pt-1 fa-point" onclick="show_children({{ d.primary_ref }})">
        {{if location1_display_first}}
            {{if w.show_location1}}{{d.location}}{{end}} {{if w.show_location2}}{{if use_location2}} | {{d.location2}} {{end}}{{end}}
        {{else}}
            {{if w.show_location2}}{{if use_location2}}{{d.location2}} | {{end}}{{end}}{{if w.show_location1}}{{d.location}}{{end}}
        {{end}}
    </div>
    {{if w.show_name}}
        <div class="row ml-1 pb-1 no-gutters fa-point" onclick="show_children({{ d.primary_ref }})">
            <div class="card_media_name_text{{w.id}} text-truncate">
                {{d.name}}
            </div>
        </div>
    {{end}}

    <div class="row">
        {{if w.show_artwork}}
            <div class="col">
                <!--albumart feature device is subtype 14-->
                {{ for c in d.children }}
                {{if c.device_sub_type==14}}
                <!--album art-->
                <div id='stimgprim_{{c.ref}}'>{{ status_image c.ref 80 }}</div>
                {{end}}
                {{end}}        
            </div>
        {{end}}
        {{if w.show_player_status}}
            <div class="col">
                <!--playerstatus feature device holds what is playing-->
                {{ for c in d.children }}
                {{if c.device_sub_type==1}}
                <!--playerstatus-->
                <div id='media_status_{{c.ref}}' class="card_media_status_text{{w.id}}">
                    {{status_text_short c.ref}}
                </div>
                {{end}}
                {{end}}
            </div>
        {{end}}
    </div>

    {{if w.show_player_controls}}
    <div class="row mt-1">
        <!--player controls-->
        {{ for c in d.children }}
        {{if c.device_sub_type==3}}
        {{for p in c.vspairs}}
        {{if p.control_use=='_Previous'}}
        <div class="col-3">
            <i class="fas fa-point fa-step-backward mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
        </div>
        {{end}}
        {{if p.control_use=='_Pause'}}
        <div class="col-3">
            <i class="fas fa-point fa-pause mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
        </div>
        {{end}}
        {{if p.control_use=='_Play'}}
        <div class="col-3">
            <i class="fas fa-point fa-play mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
        </div>
        {{end}}
        {{if p.control_use=='_Next'}}
        <div class="col-3">
            <i class="fas fa-point fa-step-forward mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
        </div>
        {{end}}
        {{end}}
        {{end}}
        {{end}}
    </div>
    {{end}}
    {{if w.show_volume}}
    <div class="row">
        <!--volume-->
        {{ for c in d.children }}
        {{if c.device_sub_type==4}}
        {{for p in c.vspairs}}
        {{if p.control_use=='_Volume'}}
        <div class="col-9">
            <div id='media_volume_{{c.ref}}'>
                <div class='mr-1 ml-1 flex-fill' style='width:100%; '>
                    <input type='range' class='custom-range flex-fill' id='volume_{{c.ref}}' ref='{{c.ref}}' ccindex='0' action='control' min='{{p.range_start}}' max='{{p.range_end}}' step='1' value='{{device_value c.ref}}' />
                </div>
            </div>
        </div>
        {{end}}
        {{end}}
        {{end}}
        {{end}}
        <!--mute toggle-->
        {{ for c in d.children }}
        {{if c.device_sub_type==13 || c.device_sub_type==4}}	<!--mute controls can be their own feature or be part of the volume feature-->
        {{havetoggle=false}}
        {{for p in c.vspairs}}
        {{if p.control_use=='_MuteToggle'}}
        {{havetoggle=true}}
        <div class="col-3">
            {{if (device_value c.ref)==0}}
            <!--mute-->
            <i class="fas fa-point fa-volume-mute mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
            {{end}}
            {{if (device_value c.ref)==1}}
            <!--mute-->
            <i class="fas fa-point fa-volume-up mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
            {{end}}
        </div>
        {{end}}
        {{end}}
        {{if !havetoggle}}
        <!--use mute and unmute buttons-->
        {{for p in c.vspairs}}
        {{if p.control_use=='_Mute'}}
        <i class="fas fa-point fa-volume-mute mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
        {{end}}
        {{if p.control_use=='_UnMute'}}
        <i class="fas fa-point fa-volume-up mr-1 ml-1 mb-2" ref='{{c.ref}}' action='control' value='{{p.value}}'></i>
        {{end}}
        {{end}}
        {{end}}
        {{end}}
        {{end}}
    </div>
    {{end}}

    <div class="mb-5">
    </div>   

</form>
{{end}}
    </div>
{{end}}