<div class="tagManagerTrackingCode">

    <div piwik-activity-indicator loading="true" ng-style="{opacity: (trackingCode.isLoading ? 1 : 0) }"></div>

    <div class="row">
        <div class="col s12 m4 ">
            <div class="form-group row">
                <div class="col s12 input-field">
                <label for="tagManagerTrackingCodeSite" class="siteSelectorLabel">{{ 'General_Website'|translate }}</label>
                <div piwik-siteselector
                     class="sites_autocomplete"
                     ng-model="tagTrackingCode.site"
                     id="tagManagerTrackingCodeSite"
                     show-all-sites-item="false"
                     switch-site-on-select="false"
                     show-selected-site="true"></div>
            </div>
            </div>
        </div>
        <div class="col s12 m4">
            <div piwik-field uicontrol="select" name="containers"
                 ng-model="tagTrackingCode.idContainer"
                 ng-change="tagTrackingCode.onContainerChange()"
                 options="tagTrackingCode.containers"
                 data-disabled="(tagTrackingCode.containers|length) <= 1"
                 full-width="true"
                 title="{{ 'TagManager_Container'|translate }}">
            </div>
        </div>
        <div class="col s12 m4">
            <div piwik-field uicontrol="select" name="environment"
                 ng-model="tagTrackingCode.environment"
                 ng-change="tagTrackingCode.fetchInstallInstructions()"
                 options="tagTrackingCode.environments"
                 data-disabled="(tagTrackingCode.environments|length) <= 1"
                 full-width="true"
                 title="{{ 'TagManager_Environment'|translate }}">
            </div>
        </div>
    </div>

    <div ng-show="tagTrackingCode.idContainer && tagTrackingCode.noReleaseFound" class="alert alert-info">
        {{ 'TagManager_NoReleasesFoundForContainer'|translate }}

        <a href="">{{ 'TagManager_PublishVersionToEnvironmentToViewEmbedCode'|translate }} </a>
    </div>

    <div ng-repeat="installInstruction in tagTrackingCode.installInstructions">
        <p>{{ installInstruction.description }}
            <br />
            <a href="{{ installInstruction.helpUrl }}" target="_blank" ng-show="installInstruction.helpUrl">{{ 'TagManager_LearnMore'|translate }}</a>
        </p>

        <pre piwik-select-on-focus class="codeblock"
             ng-bind="installInstruction.embedCode">
        </pre>
    </div>

    <h3 ng-show="tagTrackingCode.idContainer">
        {{ 'TagManager_CustomizeTracking'|translate }}
    </h3>
    <p ng-show="tagTrackingCode.idContainer">{{ 'TagManager_CustomizeTrackingTeaser'|translate }}</p>
    <ul ng-show="tagTrackingCode.idContainer">
        <li ng-show="!tagTrackingCode.matomoConfigs.length">{{ 'TagManager_NoMatomoConfigFoundForContainer'|translate }}</li>
        <li ng-repeat="matomoConfig in tagTrackingCode.matomoConfigs"><a ng-href="{{ tagTrackingCode.linkTo('manageVariables', tagTrackingCode.idContainer, 'idVariable=' + matomoConfig.idvariable) }}"
        ><span class="icon-edit"></span> {{ matomoConfig.name }}</a></li>
    </ul>
    <p ng-show="tagTrackingCode.idContainer">
        <br />
        <a ng-href="{{ tagTrackingCode.linkTo('dashboard', tagTrackingCode.idContainer) }}"><span class="icon-show"></span> {{ 'TagManager_ViewContainerDashboard'|translate }}</a>
    </p>
</div>