<h1 class="unboxed">What is the meaning of the columns?</h1>

<div class="row">
  <div class="col-md-12">
    <div class="box">

        <div class="alert alert-info" ng-show="mode=='aliases'">
            You're now prompted to configure which column in the source data contains the 
            preferred name of the entities, and which column holds an alias value.
        </div>


        <div class="alert alert-info" ng-show="mode=='entities'">
            You're now prompted to connect the columns in your source data with the attributes 
            defined by the schemata in {{project.label}}. To import entities, you will at least
            need to assign one column to the <strong>Name</strong> attribute of the imported 
            entity.
        </div>

        <div class="alert alert-info" ng-show="editMode == 'attribute' && mode=='relations'">
            You're now prompted to connect the columns in your source data with the attributes 
            defined by the schemata in {{project.label}}. To import relations, you will at least
            need to set the <strong>Name</strong> attributes for the source and target entities
            of the relations that you're importing.
        </div>

        <table class="table table-condensed table-bordered">
            <thead>
                <tr>
                    <th>Column name</th>
                    <th ng-show="editMode=='object'">Source</th>
                    <th ng-show="editMode=='object'">Relation</th>
                    <th ng-show="editMode=='object'">Target</th>
                    <th ng-show="editMode=='attribute'">Import as</th>
                    <th colspan="{{sampleData.rows.length}}" class="hidden-xs">
                        Sample data
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="header in sampleData.headers" ng-hide="mode=='relations' && editMode == 'attribute' && !mapping[header].object">
                    <th>{{header}}</th>
                    <td ng-show="editMode=='object'">
                        <input type="radio" ng-model="mapping[header].object" value="source">
                    </td>
                    <td ng-show="editMode=='object'">
                        <input type="radio" ng-model="mapping[header].object" value="relation">
                    </td>
                    <td ng-show="editMode=='object'">
                        <input type="radio" ng-model="mapping[header].object" value="target">
                    </td>
                    <td ng-show="editMode=='attribute'">
                        <select class="form-control input-sm"
                            ng-options="a.name as a.label group by a.schema.label for a in attributeChoices(header)"
                            ng-model="mapping[header].attribute"></select>
                    </td>
                    <td ng-repeat="val in sampleData.rows" class="hidden-xs">
                        <span ng-show="val[$parent.$index]"
                            ng-bind-html="truncate(val[$parent.$index], 15)"></span>
                        <span ng-hide="val[$parent.$index]" class="text-empty">
                            empty
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>

        <form class="form-horizontal">
            <div class="form-group row">
                <label class="col-sm-2 control-label" for="_source_url">Source URL</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="request.source_url" class="form-control"
                        placeholder="http://source.of.the/information.csv">
                    <p class="help-block">
                        This URL will be used as a source reference for all data, unless a 
                        column in the data has been given that contains a more specific 
                        source reference for each record. 
                    </p>
                </div>
            </div>
        </form>

        <div class="btn-group">
          <button type="button" class="btn btn-default" ng-show="mode!='relations' || editMode=='object'"
            ng-click="defineMapping()"><i class="fa fa-chevron-circle-left"></i>
            Change import mode</button>
          <button type="button" class="btn btn-default" ng-show="mode=='relations' && editMode=='attribute'"
            ng-click="editMode='object'"><i class="fa fa-chevron-circle-left"></i>
            Set column objects</button>
          <button type="button" class="btn btn-primary" ng-click="editMode='attribute'"
            ng-show="mode=='relations' && editMode=='object'" ng-disabled="!validateObjects()">
            Proceed <i class="fa fa-chevron-circle-right"></i></button>
          <button type="button" class="btn btn-primary" ng-click="beginImport()"
            ng-show="mode!='relations' || editMode=='attribute'" ng-disabled="!validateAttributes()">
            Begin import <i class="fa fa-chevron-circle-right"></i></button>
        </div>
    </div>
  </div>
</div>


